<template>
	<view class="order_main">
		<view class="body-view">
			<!-- 使用scroll-view实现tabs滑动切换 -->
			<view class="top-menu-view">
				<view
					class="menu-topic-view"
					v-for="(item, index) in tabsList"
					:key="index"
					@click="switchTab(item.value)"
				>
					<view
						:class="
							activeTabName == item.value ? 'menu-topic-act' : 'menu-topic'
						"
					>
						<view class="menu-topic-text">
							<span>{{ item.name }}</span>
							<uni-icons
								v-if="
									item.name == '产品信息' && goodsDetail.some((o) => !o.code)
								"
								style="color: #f56c6c; font-size: 32rpx; font-weight: normal"
								color="#f56c6c"
								type="info"
							></uni-icons>
						</view>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 内容 -->
			<swiper
				class="swiper-box-list"
				:current="currentTab"
				:skip-hidden-item-layout="true"
				:disable-touch="true"
			>
				<swiper-item
					class="swiper-topic-list"
					v-if="orderDetail && activeTabName === 'order'"
				>
					<view class="scroll_content">
						<scroll-view
							class="scroll-view_list"
							:refresher-triggered="triggered"
							refresher-background="transparent"
							@refresherpulling="refresherpulling"
							refresher-enabled="true"
							scroll-y="true"
							v-if="orderDetail"
							@refresherrefresh="onRefresh"
						>
							<view class="list-item_content">
								<view
									class="notice_bar"
									v-if="
										orderDetail.suspendOrder &&
										(store.state.isManager
											? orderDetail.status == 4
											: orderDetail.status == 2)
									"
								>
									<view class="info_filled">!</view>
									当前工单正在挂起，解除挂起状态后才可进行操作！
								</view>
								<view
									class="notice_bar"
									v-else-if="orderDetail?.applyChangeNetworkWaitCheckOrder"
								>
									<view class="info_filled">!</view>
									此工单已申请改派服务商，不可进行任何操作！
								</view>
								<view
									class="notice_bar"
									v-else-if="
										isCallPhone ||
										(!orderDetail.writeCallPhoneResult &&
											orderDetail.callPhoneType == 1 &&
											orderDetail.callPhoneQty > 0)
									"
								>
									<view class="info_filled">!</view>
									预约前请先填写拨打电话结果!
									<span
										style="
											color: #007cff;
											text-decoration: underline;
											margin-left: 10rpx;
										"
										@click="callPhoneRef.open('bottom')"
									>
										去填写
									</span>
								</view>
								<view class="notice_bar" v-else-if="orderDetail.nodeTimeout">
									<view class="info_filled">!</view>
									当前工单节点已超时{{
										orderDetail.nodeTimeoutLength
									}}！请尽快处理！
								</view>
								<view
									class="notice_bar"
									v-if="
										orderDetail?.enableReservation &&
										!orderDetail?.reservation &&
										(store.state.isManager
											? orderDetail.status == 4
											: orderDetail.status == 2)
									"
								>
									<view class="info_filled">!</view>
									请先预约时间！
									<span
										style="
											color: #007cff;
											text-decoration: underline;
											margin-left: 10rpx;
										"
										@click="showTimeRef.open()"
									>
										去预约
									</span>
								</view>
								<view
									class="notice_bar"
									v-if="goodsDetail.some((o) => !o.code) && is_EditSN"
								>
									<view class="info_filled">!</view>
									此工单产品无条码，请去添加后再申请完工!
									<span
										style="
											color: #007cff;
											text-decoration: underline;
											margin-left: 10rpx;
										"
										@click="switchTab('good')"
									>
										去添加
									</span>
								</view>
								<view class="list-item_info">
									<view class="list-item_info_left">
										<view class="list-item_info_left_name_phone">
											<view class="name" style="display: flex; align-items: center; column-gap: 12rpx;">
												{{ orderDetail.userName }}
												<image
													@click="onAddressCopyClick"
													style="width: 30rpx; height: 30rpx"
													src="/static/copy.svg"
													mode=""
												></image>
											</view>
											<view
												class=""
												style="
													flex: 1;
													display: flex;
													column-gap: 20rpx;
													flex-wrap: wrap;
												"
											>
												<view class="phone">
													{{ setPhone(orderDetail.userPhone) }}
												</view>
												<view
													class="call_status"
													v-if="
														!orderDetail.applyCancelOrderWaitCheck &&
														!orderDetail?.applyChangeNetworkWaitCheckOrder &&
														orderDetail.callPhoneType == 1 &&
														(store.state.isManager
															? orderDetail.status == 4
															: orderDetail.status == 2)
													"
												>
													<span
														style="color: #f53f3f"
														v-if="orderDetail.callPhoneQty == 0"
													>
														未拨打
													</span>
													<span v-else>
														已拨打{{ orderDetail.callPhoneQty }}次
													</span>
												</view>
											</view>
										</view>
										<view class="address">
											{{
												orderDetail.province +
												orderDetail.city +
												orderDetail.area +
												orderDetail.town +
												orderDetail.address
											}}
										</view>
									</view>
									<!-- <view class="list-item_info_right"> -->
										<!-- <view class="list-item_info_right_btn"> -->
											<!-- <uni-icons
												class="bg_btn"
												size="24"
												type="paperplane-filled"
												@click="getLocation"
												color="#007cff"
											></uni-icons> -->
											<!-- <uni-icons class="bg_btn" size="24" type="phone"
												
												color="#007cff"
												@click="makePhoneCall(orderDetail.userPhone)"></uni-icons> -->
										<!-- </view> -->
									<!-- </view>sa -->
								</view>
								<view class="list-item">
									<view class="list-item_top">
										<!-- 	<view class="list-item_title">
											基本信息
										</view> -->
										<uni-section
											title="基本信息"
											titleColor="#000"
											titleFontSize="28rpx"
											type="line"
										></uni-section>
									</view>
									<view class="list-item_lable">
										<!-- <view class="list-item_lable_title">
											工单单号：
										</view> -->
										<view class="cont">
											<view
												style="
													display: flex;
													align-items: center;
													justify-content: space-between;
													flex: 1;
												"
											>
												<span
													:style="`font-weight: bold;color:${
														orderDetail.rejectedOrder &&
														(store.state.isManager
															? [1, 2, 3, 4].includes(orderDetail.status)
															: [1, 2].includes(orderDetail.status))
															? '#f56c6c'
															: ''
													}`"
												>
													{{ orderDetail.workNo }}
													<image
														@click="copy(orderDetail.workNo)"
														style="width: 30rpx; height: 30rpx"
														src="/static/copy.svg"
														mode=""
													></image>
												</span>
												<!-- 	<view class="level" :style="{color:orderDetail.workLevelColor}">
													{{orderDetail.workLevel}}
												</view> -->
											</view>
										</view>
									</view>
									<view class="list-item_top_right">
										<view class="_tag">
											{{ orderDetail.module }}
										</view>
										<view
											class="_tag"
											v-if="
												orderDetail.applyCancelOrderWaitCheck &&
												store.state.isManager &&
												orderDetail.status == 2
													? false
													: true
											"
											:style="{
												backgroundColor: status.filter(
													(o) => orderDetail.status == o.status,
												)[0].color,
												color: status.filter(
													(o) => orderDetail.status == o.status,
												)[0].bg,
											}"
										>
											{{
												status.filter((o) => orderDetail.status == o.status)[0]
													.name
											}}
										</view>
										<view
											class="tip"
											v-if="
												orderDetail.rejectedOrder &&
												(store.state.isManager
													? [1, 2, 3, 4].includes(orderDetail.status)
													: [1, 2].includes(orderDetail.status))
											"
										>
											已驳回
										</view>
										<view
											class="tip"
											v-if="
												store.state.isManager &&
												orderDetail.status == 4 &&
												orderDetail.waitCheckOrder
											"
										>
											待审核
										</view>
										<view
											class="tip"
											v-if="
												orderDetail?.enableReservation &&
												!orderDetail?.reservation &&
												(store.state.isManager
													? orderDetail.status == 4
													: orderDetail.status == 2)
											"
										>
											未预约
										</view>
										<view
											class="tip"
											v-if="
												orderDetail.enableSignIn &&
												!orderDetail.signIn &&
												(store.state.isManager
													? orderDetail.status == 4
													: orderDetail.status == 2)
											"
										>
											未签到
										</view>
										<view
											class="tip"
											v-if="
												orderDetail.reminderQty > 0 &&
												(store.state.isManager
													? [1, 2, 3, 4, 5].includes(orderDetail.status)
													: [1, 2, 3].includes(orderDetail.status))
											"
										>
											催单{{ orderDetail.reminderQty }}次
										</view>
									</view>

									<!-- <view class="list-item_lable">
										<view class="list-item_lable_title">
											质保状态：
										</view>
										<view class="cont">
											{{orderDetail.overinsured?'已过保':'在保'}}
										</view>
									</view> -->
									<template v-if="orderDetail.status == 1">
										<template v-if="store.state.isManager">
											<view class="list-item_lable">
												<view class="list-item_lable_title">派单时间：</view>
												<view class="cont">
													{{ orderDetail.serviceDispatchNetworkTime }}
												</view>
											</view>
										</template>
										<template v-else>
											<view class="list-item_lable">
												<view class="list-item_lable_title">派工时间：</view>
												<view class="cont">
													{{ orderDetail.networkDispatchToEnginnerTime || '' }}
												</view>
											</view>
											<view class="list-item_lable">
												<view class="list-item_lable_title">接单人员：</view>
												<view class="cont">
													{{ DetailContentObj?.engineerName }}&nbsp;{{
														DetailContentObj?.engineerPhone
													}}
												</view>
											</view>
										</template>
									</template>
									<template
										v-if="
											store.state.isManager ? orderDetail.status == 3 : false
										"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">派工时间：</view>
											<view class="cont">
												{{ orderDetail.networkDispatchToEnginnerTime || '' }}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">接单人员：</view>
											<view class="cont">
												{{ DetailContentObj?.engineerName }}&nbsp;{{
													DetailContentObj?.engineerPhone
												}}
											</view>
										</view>
									</template>
									<template
										v-if="store.state.isManager && orderDetail.status == 2"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">派单时间：</view>
											<view class="cont">
												{{ orderDetail.serviceDispatchNetworkTime }}
											</view>
										</view>
										<view class="list-item_lable">
											接单时间：
											<view class="cont">
												{{ orderDetail.networkReceiveTime }}
											</view>
										</view>
									</template>
									<template
										v-if="
											(store.state.isManager
												? orderDetail.status == 4
												: orderDetail.status == 2) && orderDetail.waitcheckorder
										"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">申请时间：</view>
											<view class="cont">
												{{ orderDetail.waitCheckApplyTime }}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">申请人：</view>
											<view class="cont">
												{{ orderDetail.waitCheckApplyEmp }}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">申请类型：</view>
											<view class="cont">
												{{ orderDetail.waitCheckApplyType }}
											</view>
										</view>
									</template>
									<template
										v-if="
											store.state.isManager
												? orderDetail.status == 4
												: orderDetail.status == 2
										"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">派工时间：</view>
											<view class="cont">
												{{ orderDetail.networkDispatchToEnginnerTime }}
											</view>
										</view>
										<view
											class="list-item_lable"
											v-if="!orderDetail.engineer && store.state.isManager"
										>
											<view class="list-item_lable_title">工程师：</view>
											<view class="cont">
												{{ DetailContentObj?.engineerName }}&nbsp;{{
													DetailContentObj?.engineerPhone
												}}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">预约时间：</view>
											<view class="cont">
												{{ orderDetail?.reservationDate }}&nbsp;{{
													orderDetail?.reservationStartTime
												}}-{{ orderDetail?.reservationEndTime }}
											</view>
										</view>
									</template>
									<template
										v-if="
											store.state.isManager
												? orderDetail.status == 5
												: orderDetail.status == 3
										"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">申请时间：</view>
											<view class="cont">
												{{ orderDetail.applyfinishTime }}
											</view>
										</view>
										<!-- 隐藏 -->
										<!-- <view class="list-item_lable">
											<view class="list-item_lable_title">
												应收金额：
											</view>
											<view class="cont">
												￥{{(orderDetail.receivableMoney||0).toFixed(2)}}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">
												实收金额：
											</view>
											<view class="cont">
												￥{{(orderDetail.actualReceivedMoney||0).toFixed(2)}}
											</view>
										</view> -->
									</template>
									<view
										class="list-item_lable"
										v-if="
											store.state.isManager
												? orderDetail.status == 6
												: orderDetail.status == 4
										"
									>
										<view class="list-item_lable_title">完成时间：</view>
										<view class="cont">
											{{ orderDetail.orderEndTime }}
										</view>
									</view>
									<template
										v-if="
											store.state.isManager
												? orderDetail.status == 7
												: orderDetail.status == 5
										"
									>
										<view class="list-item_lable">
											<view class="list-item_lable_title">取消时间：</view>
											<view class="cont">
												{{ orderDetail.cancelOrderTime }}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">取消人员：</view>
											<view class="cont">
												{{ orderDetail.cancelOrderEmp }}
											</view>
										</view>
									</template>
									<template v-if="orderDetail.status == 50">
										<view class="list-item_lable">
											<view class="list-item_lable_title">完成时间：</view>
											<view class="cont">
												{{ orderDetail.orderEndTime }}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">应收金额：</view>
											<view class="cont">
												￥{{ (orderDetail.receivableMoney || 0).toFixed(2) }}
											</view>
										</view>
										<view class="list-item_lable">
											<view class="list-item_lable_title">实收金额：</view>
											<view class="cont">
												￥{{
													(orderDetail.actualReceivedMoney || 0).toFixed(2)
												}}
											</view>
										</view>
									</template>
									<view class="list-item_lable">
										<view class="list-item_lable_title">最新进展：</view>
										<view class="cont">
											{{ orderDetail.orderLastEvolve }}
										</view>
									</view>
								</view>
								<view class="list-item">
									<!-- 									<view class="list-item_title">
										报单信息
									</view> -->
									<view
										style="display: flex; align-items: center; column-gap: 6px"
									>
										<uni-section
											title="报单信息"
											titleColor="#000"
											titleFontSize="28rpx"
											type="line"
										></uni-section>
										<image
											@click="onCreateOrderInfoCopyClick"
											style="width: 30rpx; height: 30rpx"
											src="/static/copy.svg"
											mode=""
										></image>
									</view>
									<view
										class="list-item_lable"
										v-if="
											orderDetail.departmentId === departmentFixedData.business
										"
									>
										<view class="list-item_lable_title">店名：</view>
										<view class="cont">
											{{ orderDetail.storeName }}
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">
											{{
												orderDetail.departmentId ===
												departmentFixedData.business
													? '反馈人员'
													: '联系人员'
											}}：
										</view>
										<view class="cont">
											{{ orderDetail.repairUsername }}
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">
											{{
												orderDetail.departmentId ===
												departmentFixedData.business
													? '反馈电话'
													: '联系电话'
											}}：
										</view>
										<view class="cont">
											{{ orderDetail.repairPhone }}
										</view>
									</view>
									<view
										class="list-item_lable"
										v-if="
											orderDetail.departmentId === departmentFixedData.business
										"
									>
										<view class="list-item_lable_title">业务电话：</view>
										<view class="cont">
											{{ orderDetail.businessPhone }}
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">报单时间：</view>
										<view class="cont">
											{{ orderDetail.createTime }}
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">期望上门时间：</view>
										<view class="cont">
											{{ orderDetail.expectedDate }}&nbsp;{{
												orderDetail.expectedStartTime
											}}-{{ orderDetail.expectedEndTime }}
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">工单描述：</view>
										<view class="cont">
											<TextLength
												:text="orderDetail.description || '-'"
											></TextLength>
										</view>
									</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">工单图片：</view>
										<view class="cont">
											<view
												style="height: 80rpx; width: 80rpx"
												v-for="(img, index) in DetailContentObj?.images"
												:key="index"
											>
												<view
													class="pdf_sty"
													v-if="img.includes('pdf')"
													@click="lookPDF(img)"
												>
													PDF
												</view>
												<image
													v-else
													:src="img"
													mode="aspectFill"
													class="cont_img"
													@click="lookImg(DetailContentObj?.images, index)"
												></image>
											</view>
										</view>
									</view>
								</view>
								<!-- 							<view class="list-item">
									<view class="list-item_top">
										<view class="list-item_title">
											工单进展
										</view>
										<view class="more" @click="pageProgress">
											更多 <uni-icons type="right" color="#007cff" size="18"></uni-icons>
										</view>
									</view>
									<view class="log_item">
										<uni-icons type="smallcircle" class="icon_item" size="20"
											color="#007cff"></uni-icons>
										<view class="block_item">
											<view class="title_span">
												<p class="content_time">
													{{logObjListItem?.createTime}}
												</p>
												<p class="title" style="color#007cff">
													{{'【'+logObjListItem?.type+'】'+logObjListItem?.createEmp+'&nbsp;'+logObjListItem?.name}}{{logObjListItem?.event}}
												</p>
												<view class="content_text">
													{{logObjListItem?.content}}
												</view>
											</view>
										</view>
									</view>
								</view> -->
								<end-info
									ref="endInfoInstance"
									:order-detail="orderDetail"
									:end-status="endStatus"
									v-if="endStatus"
								/>
								<view
									class="list-item"
									v-if="store.state.isManager && orderDetail.status == 1"
								>
									<view class="list-item_title">派单备注</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">备注内容：</view>
										<view class="cont">
											<TextLength
												:text="DetailContentObj?.dispatchRemark || '-'"
											></TextLength>
										</view>
									</view>
								</view>
								<view
									class="list-item"
									v-if="
										store.state.isManager &&
										orderDetail.status == 4 &&
										orderDetail.waitCheckOrder
									"
								>
									<view class="list-item_title">申请备注</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">备注内容：</view>
										<view class="cont">
											<TextLength
												:text="orderDetail?.applyRemark || '-'"
											></TextLength>
										</view>
									</view>
								</view>
								<view
									class="list-item"
									v-if="
										store.state.isManager
											? orderDetail.status == 7
											: orderDetail.status == 5
									"
								>
									<view class="list-item_title">取消原因</view>
									<view class="list-item_lable">
										<view class="list-item_lable_title">备注内容：</view>
										<view class="cont">
											<TextLength
												:text="DetailContentObj?.cancelorderRemark || '-'"
											></TextLength>
										</view>
									</view>
								</view>
								<!-- <view class="share_box"
									v-if="(store.state.isManager?orderDetail.status==4:orderDetail.status==2)&&moreIcons.length>0">
									<view class="share_content">
										<view class="share_content_item" @click="onShare(item)"
											v-for="item in moreIcons" :key="item.status"
											v-show="item.status==112?(!orderDetail?.applyChangeNetworkWaitCheckOrder&&(store.state.isManager? orderDetail.status==4: orderDetail.status==2)):true">
											<image :src="`/static/network/order/more/order${item.status}.svg`"
												mode="aspectFit" class="icon_img"></image>
											<view class="icon_name">
												{{item.name}}
											</view>
										</view>
									</view>
								</view> -->
							</view>
						</scroll-view>
						<view class="footer_order" v-if="orderDetail.status == 1">
							<view class="footer_order_left" @click="rejectiveShow">
								<p class="red_tip">拒绝接单</p>
							</view>
							<view class="footer_order_right" @click="rejectiveYes">
								<view class="btn">确认接单</view>
							</view>
						</view>
						<view
							class="footer_order"
							v-if="
								store.state.isManager &&
								orderDetail.status == 2 &&
								!orderDetail.applyCancelOrderWaitCheck
							"
						>
							<view
								class="footer_order_right"
								v-if="store.state.isManager && orderDetail.status == 2"
								@click="AssignmentEngineer"
							>
								<view class="btn">分派工程师</view>
							</view>
							<!-- <view class="footer_order_left_" @click="changeType">
								更多 <uni-icons type="down" color="#007cff" size="12"></uni-icons>
							</view> -->
						</view>
						<view
							class="footer_order"
							v-else-if="
								store.state.isManager && orderDetail.applyCancelOrderWaitCheck
							"
						>
							<view class="footer_order_right" style="backgroundcolor: #ccc">
								<view class="btn">已申请取消工单</view>
							</view>
						</view>
						<view
							class="footer_order"
							v-if="
								store.state.isManager
									? orderDetail.status == 4
									: orderDetail.status == 2
							"
						>
							<view
								class="footer_order_right"
								v-if="
									orderDetail.suspendOrder &&
									(store.state.isManager ? orderDetail.engineer : true)
								"
								@click="networkEmpRestartSuspend"
							>
								<view class="btn">解除挂起</view>
							</view>
							<template v-else>
								<view
									class="footer_order_right"
									v-if="orderDetail.waitCheckOrder && store.state.isManager"
									@click="checkOrder"
								>
									<view class="btn">审核</view>
								</view>
								<view
									class="footer_order_right"
									v-else-if="
										orderDetail?.applyChangeNetworkWaitCheckOrder &&
										store.state.isManager
									"
									style="backgroundcolor: #ccc"
								>
									<view class="btn">已申请改派服务商</view>
								</view>
								<view
									class="footer_order_right"
									v-else-if="
										!store.state.isManager &&
										orderDetail?.engineerApplyChangeOrder
									"
									style="backgroundcolor: #ccc"
								>
									<view class="btn">已申请转单</view>
								</view>
								<view
									class="footer_order_right"
									v-else-if="orderDetail?.hasApplyFinishorder"
									style="backgroundcolor: #ccc"
								>
									<view class="btn">已申请完工</view>
								</view>
								<view class="footer_order_right_" v-else>
									<view
										class="share_box"
										v-if="isCurrentOrderInService && moreIcons.length > 0"
									>
										<view class="share_content">
											<view
												class="share_content_item"
												@click="onShare(item)"
												v-for="item in moreIcons"
												:key="item.status"
											>
												<view
													v-show="
														item.status == 112
															? !orderDetail?.applyChangeNetworkWaitCheckOrder
															: true
													"
													style="
														display: flex;
														flex-direction: column;
														align-items: center;
													"
												>
													<image
														:src="`/static/network/order/more/order${item.status}.svg`"
														mode="aspectFit"
														class="icon_img"
													></image>
													<view class="icon_name">
														{{ item.name }}
													</view>
												</view>
											</view>

											<!-- 申请结单 -->
											<view
												class="share_content_item"
												v-if="endStatus === false"
												@click="handleEndApplyClick"
											>
												<image
													:src="`/static/network/order/more/order5.svg`"
													mode="aspectFit"
													class="icon_img"
												></image>
												<view class="icon_name">申请结单</view>
											</view>
										</view>
									</view>
								</view>
								<!-- 	<view class="footer_order_right" v-else @click="shareShow">
									<view class="btn">更多功能</view>
								</view> -->
							</template>
						</view>
					</view>
				</swiper-item>

				<!-- 产品信息 -->
				<swiper-item class="swiper-topic-list" v-if="activeTabName === 'good'">
					<view class="scroll_content">
						<scroll-view
							class="scroll-view_list"
							:refresher-triggered="triggered"
							refresher-background="transparent"
							@refresherpulling="refresherpulling"
							refresher-enabled="true"
							scroll-y="true"
							@refresherrefresh="onRefresh"
							v-if="goodsDetail"
						>
							<view class="goods_info">
								<view
									v-for="(item, index) in goodsDetail"
									:key="index"
									class="goods_info_item_li"
								>
									<view class="goods_info_conent">
										<view class="top">
											<view class="right_text">
												<view
													class="font-28rpx font-bold"
													style="
														display: flex;
														align-items: center;
														column-gap: 8px;
													"
												>
													产品{{ index + 1 }}&nbsp;&nbsp;{{ item.goodsName }}
													<image
														@click="onGoodInfoCopyClick(item)"
														style="width: 30rpx; height: 30rpx"
														src="/static/copy.svg"
														mode=""
													></image>
												</view>
												<view class="flex column-gap-12rpx">
													<text
														class="white-nowrap font-24rpx status-primary-tag"
													>
														{{
															item.status == 1
																? '未质保'
																: item.status == 2
																? '质保中'
																: item.status == 3
																? '已过质保'
																: '已作废'
														}}
													</text>
													<text
														class="white-nowrap font-24rpx status-primary-tag"
													>
														剩余质保：{{ item.surplusDay }}天
													</text>
												</view>
												<view class="pt">
													<span class="tip">编号：</span>
													<view class="lis">
														{{ item.goodsCode }}
													</view>
												</view>
												<view class="pt">
													<span class="tip">数量：</span>
													<view class="lis">
														{{ item.qty }}
													</view>
												</view>
												<view class="pt">
													<span class="tip">规格：</span>
													<view class="lis">
														{{ item.goodsSpecName }}
													</view>
												</view>
												<!-- <view class="pt">
													<span class="tip">型号：</span>
													<view class="lis">
														{{ item.goodsModel }}
													</view>
												</view> -->
												<view class="pt">
													<span class="tip">出厂日期：</span>
													<view class="lis">
														{{ item.dateOfProduction }}
													</view>
												</view>
												<!-- <view class="pt">
													<span class="tip">出厂日期：</span>
													<view class="lis">
														{{ item.dateOfProduction }}
													</view>
												</view> -->
												<view class="pt">
													<span class="tip">质保周期：</span>
													<view class="lis">
														{{
															item.warrantyStartTime +
															'-' +
															item.warrantyEndTime
														}}
													</view>
												</view>
											</view>
											<view class="left_img">
												<image
													v-if="item.goodsImage"
													@click="lookImg([item.goodsImage], 0)"
													class="img"
													lazy-load
													:src="item.goodsImage"
													mode="aspectFill"
												></image>
												<uni-icons
													color="#aae"
													size="48"
													v-else
													type="image"
												></uni-icons>
											</view>
										</view>
										<view class="bottom">
											<view class="code">
												<view v-if="item.code" class="info">
													<view class="label">一物一码：</view>
													<view class="value">
														{{ item.code }}
													</view>
												</view>
												<view
													class="no-code-tip"
													style="color: #f56c6c"
													@click="showGoodsCode(item)"
													v-else-if="is_EditSN"
												>
													无条码，请去添加!
												</view>
												<view
													class="no-code-tip"
													style="color: #f56c6c"
													@click="showGoodsCode(item)"
													v-else
												>
													无条码
												</view>
												<view class="operate" @click="showGoodsCode(item)">
													<!-- <view class="num_b_qty">
														{{item.qty>99?'99+':item.qty}}
													</view> -->
													<span
														style="color: #999; line-height: 28rpx"
														v-if="is_EditSN && item.code"
													>
														修改
													</span>
													<span
														style="color: #999; line-height: 28rpx"
														v-else-if="is_EditSN"
													>
														去添加
													</span>
													<uni-icons
														type="right"
														color="#999"
														size="12"
													></uni-icons>
												</view>
												<!-- <view class="num_b" @click="showGoodsCode(item)" v-else-if="is_EditSN">
													<span style="color: #999;line-height: 28rpx;">修改</span>
													<uni-icons type="right" color="#999" size="12"></uni-icons>
												</view> -->
											</view>
											<view class="img-container">
												<view
													class="code-img-container"
													v-if="
														orderDetail &&
														orderDetail.moduleId ===
															fixedModuleId.engineerMachine
													"
												>
													<view class="label">
														<view class="icon">*</view>
														<view class="txt">条码图片：</view>
													</view>
													<view class="code-img" v-if="item.codeImg">
														<image
															:src="item.codeImg"
															mode=""
															class="img"
															@click="handleGoodImgPreview(index, 'code')"
														></image>

														<view
															class="del-btn"
															@click="handleImgDel(index, 'code')"
															v-if="submitEndOrderBtnState"
														>
															<uni-icons
																type="closeempty"
																:size="12"
																color="#fff"
																class="icon"
															></uni-icons>
														</view>
													</view>
													<view
														v-else
														class="code-img-upload"
														@click="handleUploadSceneAndCodeImg(index, 'code')"
													>
														<uni-icons
															type="cloud-upload"
															:size="22"
															color="#999"
														></uni-icons>
													</view>
												</view>

												<view
													class="scene-img-container"
													v-if="
														orderDetail &&
														orderDetail.moduleId ===
															fixedModuleId.engineerMachine
													"
												>
													<view class="label">
														<view class="icon">*</view>
														<view class="txt">现场图片：</view>
													</view>
													<view class="scene-img" v-if="item.sceneImg">
														<image
															:src="item.sceneImg"
															mode=""
															class="img"
															@click="handleGoodImgPreview(index, 'scene')"
														></image>

														<view
															class="del-btn"
															@click="handleImgDel(index, 'scene')"
															v-if="submitEndOrderBtnState"
														>
															<uni-icons
																type="closeempty"
																:size="12"
																color="#fff"
																class="icon"
															></uni-icons>
														</view>
													</view>
													<view
														v-else
														class="scene-img-upload"
														@click="handleUploadSceneAndCodeImg(index, 'scene')"
													>
														<uni-icons
															type="cloud-upload"
															:size="22"
															color="#999"
														></uni-icons>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>

						<!-- 只有工程机才会显示这个按钮 -->
						<view
							v-if="
								orderDetail.moduleId === fixedModuleId.engineerMachine &&
								submitEndOrderBtnState
							"
							class="engineer-machine-end-order-btn-container"
						>
							<view class="btn" @click="onSubmitEndOrder">提交结单</view>
						</view>
					</view>
				</swiper-item>

				<!-- 费用信息 -->
				<swiper-item class="swiper-topic-list" v-if="activeTabName === 'fee'">
					<view class="scroll_content">
						<scroll-view
							class="scroll-view_list"
							:refresher-triggered="triggered"
							refresher-background="transparent"
							@refresherpulling="refresherpulling"
							refresher-enabled="true"
							scroll-y="true"
						>
							<view class="list-item_content" v-if="getFeeInfo">
								<view class="list-item_info_fee" style="padding-left: 20rpx">
									<view class="lable">
										<view class="title">工单结算价：</view>
										<view class="cont">
											￥{{ getFeeInfo.networkModulePrice.toFixed(2) }}
										</view>
									</view>
								</view>
								<view class="list-item_info_fee">
									<view class="lable" @click="isFeeShow = !isFeeShow">
										<uni-section
											title="服务总费用："
											titleFontSize="28rpx"
											type="line"
										></uni-section>
										<view class="cont">
											￥{{
												getFeeInfo.orderFees
													.map((o) =>
														o.detailFeeInfoVos
															.map((i) => (i.status == 2 ? i.price : 0))
															.reduce((sum, num) => sum + num, 0),
													)
													.reduce((sum, num) => sum + num, 0)
													.toFixed(2)
											}}
										</view>
										<span
											v-if="getFeeInfo.orderFees.length > 1"
											:class="isFeeShow ? 'down_up_' : 'down_up'"
										></span>
									</view>
									<view
										v-for="(item, index) in getFeeInfo.orderFees"
										v-if="getFeeInfo.orderFees.length == 1 ? true : !isFeeShow"
										:key="index"
									>
										<view class="" style="display: flex; margin-bottom: 10rpx">
											单号：{{ item.code }}
										</view>
										<table cellspacing="6" style="width: 100%">
											<!-- 表头行 -->
											<thead>
												<tr
													style="
														display: flex;
														justify-content: space-around;
														align-items: center;
													"
												>
													<th
														style="width: 30%; text-align: center"
														width="30%"
														class="th"
														align="center"
													>
														服务名称
													</th>
													<th
														style="width: 30%; text-align: center"
														width="30%"
														class="th"
														align="center"
													>
														服务金额
													</th>
													<th
														style="width: 20%; text-align: center"
														width="20%"
														class="th"
														align="center"
													>
														状态
													</th>
													<th
														style="width: 30%; text-align: center"
														width="30%"
														class="th"
														align="center"
													>
														审核时间
													</th>
												</tr>
											</thead>
											<tbody>
												<!-- 表格数据行 -->
												<tr
													style="
														display: flex;
														justify-content: space-around;
														align-items: center;
														padding: 10rpx 0;
													"
													v-for="(item2, index2) in item.detailFeeInfoVos"
													:key="index2"
												>
													<td
														style="width: 30%; text-align: center"
														width="30%"
														class="td"
													>
														{{ item2.name }}
													</td>
													<td
														style="width: 30%; text-align: center"
														width="30%"
														class="td"
													>
														￥{{ item2.price.toFixed(2) }}
													</td>
													<td
														style="width: 20%; text-align: center"
														:style="{
															color:
																item2.status == 1
																	? '#e69103'
																	: item2.status == 2
																	? '#007cff'
																	: '#f56c6c',
														}"
														width="20%"
														class="td"
													>
														{{
															item2.status == 1
																? '待审核'
																: item2.status == 2
																? '已通过'
																: '已驳回'
														}}
													</td>
													<td
														style="width: 30%; text-align: center"
														width="30%"
														class="td"
													>
														{{ item2.status == 1 ? '' : item2.dateTime }}
													</td>
												</tr>
											</tbody>
										</table>
										<p
											style="width: 100%; height: 1rpx; background-color: #eee"
										/>
									</view>
								</view>
								<view class="list-item_info_fee">
									<view class="lable" @click="isSpareShow = !isSpareShow">
										<view class="title">
											<uni-section
												title="配件总费用："
												titleFontSize="28rpx"
												type="line"
											></uni-section>
										</view>
										<view class="cont">
											￥{{
												getFeeInfo.spareFees
													.map((o) =>
														o.detailFeeInfoVos
															.map((i) => (i.status == 2 ? i.price : 0))
															.reduce((sum, num) => sum + num, 0),
													)
													.reduce((sum, num) => sum + num, 0)
													.toFixed(2)
											}}
										</view>
										<span
											v-if="getFeeInfo.spareFees.length > 1"
											:class="isSpareShow ? 'down_up_' : 'down_up'"
										></span>
									</view>
									<view
										v-if="
											getFeeInfo.spareFees.length == 1 ? true : !isSpareShow
										"
										v-for="(item, index) in getFeeInfo.spareFees"
										:key="index"
									>
										<view
											class=""
											style="display: flex; margin-bottom: 10rpx 0"
										>
											单号：{{ item.code }}
										</view>
										<table cellspacing="6" style="width: 100%">
											<!-- 表头行 -->
											<thead>
												<tr
													style="
														display: flex;
														justify-content: space-around;
														align-items: center;
													"
												>
													<th
														style="width: 30%; text-align: center"
														width="30%"
														class="th"
														align="center"
													>
														配件名称
													</th>
													<th
														style="width: 30%; text-align: center"
														width="30%"
														class="th"
														align="center"
													>
														配件金额
													</th>
													<th
														style="width: 18%; text-align: center"
														width="18%"
														class="th"
														align="center"
													>
														状态
													</th>
													<th
														style="width: 30%; text-align: center"
														width="30%"
														class="th"
														align="center"
													>
														审核时间
													</th>
												</tr>
											</thead>
											<!-- 表格数据行 -->
											<tbody>
												<tr
													style="
														display: flex;
														justify-content: space-around;
														align-items: center;
														padding: 10rpx;
													"
													v-for="(item2, index2) in item.detailFeeInfoVos"
													:key="index2"
												>
													<td
														style="width: 30%; text-align: center"
														width="30%"
														class="td"
													>
														{{ item2.name }}
													</td>
													<td
														style="width: 30%; text-align: center"
														width="30%"
														class="td"
													>
														￥{{ item2.price.toFixed(2) }}
													</td>
													<td
														style="width: 18%; text-align: center"
														:style="{
															color:
																item2.status == 1
																	? '#e69103'
																	: item2.status == 2
																	? '#007cff'
																	: '#f56c6c',
														}"
														width="18%"
														class="td"
													>
														{{
															item2.status == 1
																? '待审核'
																: item2.status == 2
																? '已通过'
																: '已驳回'
														}}
													</td>
													<td
														style="width: 30%; text-align: center"
														width="30%"
														class="td"
													>
														{{ item2.status == 1 ? '' : item2.dateTime }}
													</td>
												</tr>
											</tbody>
										</table>
										<p
											style="width: 100%; height: 1rpx; background-color: #eee"
										/>
									</view>
								</view>
								<view class="list-item_info_fee">
									<view class="lable">
										<uni-section
											title="合计金额："
											titleFontSize="28rpx"
											type="line"
										></uni-section>
										<view class="cont">
											￥{{
												(
													getFeeInfo.orderFees
														.map((o) =>
															o.detailFeeInfoVos
																.map((i) => (i.status == 2 ? i.price : 0))
																.reduce((sum, num) => sum + num, 0),
														)
														.reduce((sum, num) => sum + num, 0) +
													getFeeInfo.spareFees
														.map((o) =>
															o.detailFeeInfoVos
																.map((i) => (i.status == 2 ? i.price : 0))
																.reduce((sum, num) => sum + num, 0),
														)
														.reduce((sum, num) => sum + num, 0)
												).toFixed(2)
											}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>

				<!-- 工单进展 -->
				<swiper-item class="swiper-topic-list" v-if="activeTabName === 'log'">
					<view class="scroll_content">
						<scroll-view
							:refresher-triggered="triggered"
							refresher-background="transparent"
							@refresherpulling="refresherpulling"
							refresher-enabled="true"
							scroll-y="true"
							class="scroll-view_list"
							@scrolltolower="handleLogListScrolltolower"
						>
							<view class="work_no" v-if="orderDetail">
								<view class="">
									<span class="label_name">工单单号：</span>
									<span class="text_no">{{ orderDetail?.workNo }}</span>
								</view>
							</view>
							<view class="log_list_box" v-if="orderDetail">
								<view class="log_list">
									<view
										class="log_item"
										v-for="(item, index) in logListData.rows"
										:key="index"
									>
										<uni-icons
											type="smallcircle"
											class="icon_item"
											size="20"
											:color="index == 0 ? '#007cff' : '#EAECEE'"
										></uni-icons>
										<view class="block_item">
											<view class="title_span">
												<p
													class="content_time"
													:style="{color: index == 0 ? '#000' : '#999'}"
												>
													{{ item.createTime }}
												</p>
												<p
													class="title"
													:style="{color: index == 0 ? '#007cff' : '#999'}"
												>
													{{
														'【' +
														item.type +
														'】' +
														item.createEmp +
														'&nbsp;' +
														item.name
													}}{{ item.event }}
												</p>
												<p
													class="content_text"
													v-if="
														item.eventType == 1 &&
														(store.state.isManager
															? orderDetail.status == 4
															: orderDetail.status == 2)
													"
													@click="EditFinishOrderInfo(item.eventId)"
												>
													点击修改
													<span
														style="text-decoration: underline; color: #007cff"
													>
														结单信息
													</span>
												</p>
												<view
													class="content_text"
													:style="{color: index == 0 ? '#000' : '#999'}"
												>
													{{ item.content }}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="mask_more" v-if="typeBtn" @click="onClickMore">
			<view class="btn_more">
				<p
					v-for="(item, index) in typeList"
					@click="onClickMore(index)"
					class="text_sty"
					:key="index"
				>
					{{ item.text }}
				</p>
			</view>
		</view>

		<!-- 产品一物一码列表弹窗 -->
		<EditCode
			:showpopup="popupGoodsCode"
			:workId="workId"
			:is_EditSN="is_EditSN"
			@set-popup="popupGoodsCode = $event"
			@updata_datail="getNetworkOrderDetailGoodsObj(workId)"
			:dataList="goodsList"
		></EditCode>
		<!-- 取消工单 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="取消工单"
				value=""
				placeholder="请输入取消理由"
				@confirm="dialogInputConfirm"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 拒绝接单 -->
		<uni-popup ref="inputDialog_rej" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="拒绝接单"
				value=""
				@confirm="dialogInputConfirmRej(remark)"
			>
				<view class="input_popup">
					<uni-easyinput
						v-model="remark"
						placeholder="请输入拒绝理由"
					></uni-easyinput>
					<view class="red_tip_title">拒绝接单，将无法查询此单记录！</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 更多功能 -->
		<uni-popup ref="shareRef" :safe-area="false" type="bottom">
			<view class="more_box">
				<view class="share_content">
					<view
						class="share_content_item"
						v-for="item in moreIcons2"
						:key="item.status"
					>
						<image
							@click="onShare(item)"
							:src="`/static/network/order/more/icon${item.status}.svg`"
							mode="aspectFit"
							class="icon_img"
						></image>
						<view class="icon_name">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="cancel_btn" @click="shareRef.close()">取消</view>
			</view>
		</uni-popup>
		<!-- 选择时间段 -->
		<TimePopup
			:safe-area="false"
			@set-popup="showpopupValue($event)"
			:setTimeObj="setTimeObj"
			:showpopup="showpopup"
			:workId="workId"
			@value-change="valueChange($event)"
		></TimePopup>
		<!-- 选择预约时间段 -->
		<TimePopup
			@set-popup="showpopupValueCall($event)"
			:setTimeObj="setTimeObjCall"
			:showpopup="showpopupCall"
			:workId="workId"
			@value-change="valueChangeCall($event)"
		></TimePopup>
		<uni-popup
			ref="showTimeRef"
			type="bottom"
			:mask-click="false"
			:safe-area="false"
		>
			<view class="popup-time_show">
				<view class="lable_top">
					<uni-icons
						v-if="timeObj?.dateVal"
						class="icon"
						color="#aaa"
						@click="closePopup()"
						size="22"
						type="closeempty"
					></uni-icons>
					<view>预约时间</view>
					<uni-icons
						v-if="!timeObj?.dateVal"
						class="icon"
						color="#aaa"
						@click="closePopup()"
						size="22"
						type="closeempty"
					></uni-icons>
					<view class="lable_btn" @click="timeSubmit" v-if="timeObj?.dateVal">
						确定
					</view>
				</view>
				<view class="bodyer_time">
					<view class="bodyer_time_left" v-if="!timeObj?.dateVal.date">
						<span class="bodyer_time_left_tip">预约时间：</span>
						<span v-if="orderDetail?.reservationDate">
							{{ orderDetail?.reservationDate }}&nbsp;{{
								orderDetail.reservationStartTime
							}}~{{ orderDetail.reservationEndTime }}
						</span>
					</view>
					<view class="bodyer_time_left" v-else>
						<span class="bodyer_time_left_tip">预约时间：</span>
						{{ timeObj?.dateVal.date }}&nbsp;{{ timeObj?.time }}
					</view>
					<view class="bodyer_time_right" @click="showpopupSelet">
						请选择
						<uni-icons
							class="icon"
							color="#aaa"
							size="20"
							type="right"
						></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 改服务商 -->
		<uni-popup ref="changeNetworkDialog" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="申请改派服务商"
				value=""
				placeholder="请输入备注"
				@confirm="changeNetworkConfirm"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 改工程师 -->
		<uni-popup ref="changeNetworkEmpDialog" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				mode="input"
				title="申请改工程师"
				value=""
				placeholder="请输入备注"
				@confirm="changeNetworkEmpConfirm"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 填写拨打弹窗 -->
		<uni-popup ref="callPhoneRef" :safe-area="false" :before-close="true">
			<view class="call_phone_popup">
				<view class="lable_top">
					<view>拨打结果</view>
					<uni-icons
						class="icon"
						color="#aaa"
						@click="closeCallPhonePopup()"
						size="22"
						type="closeempty"
					></uni-icons>
				</view>
				<view class="call_content">
					<p class="table">拨打结果：</p>
					<uni-data-checkbox
						v-model="callPhoneLogVo.callPhoneResult"
						:localdata="callTypeList"
					/>
					<view class="bodyer_time" v-if="callPhoneLogVo.callPhoneResult != 3">
						<view class="bodyer_time_left">
							<span class="bodyer_time_left_tip">
								{{
									callPhoneLogVo.callPhoneResult == 1
										? '预约时间：'
										: '下次拨打时间：'
								}}
							</span>
							{{ timeObjCall?.dateVal.date }}&nbsp;{{ timeObjCall?.time }}
						</view>
						<view class="bodyer_time_right" @click="showpopupSeletCall">
							请选择
							<uni-icons
								class="icon"
								color="#aaa"
								size="20"
								type="right"
							></uni-icons>
						</view>
					</view>
					<p class="table" v-if="callPhoneLogVo.callPhoneResult == 3">
						<span style="color: #f56c6c">*</span>
						备注：
					</p>
					<view class="text_input" v-if="callPhoneLogVo.callPhoneResult == 3">
						<uni-easyinput
							type="textarea"
							maxlength="20"
							:inputBorder="false"
							placeholderStyle="font-size:28rpx;background:rgb(243, 244, 248)"
							v-model="callPhoneLogVo.remark"
							placeholder="填写备注"
						/>
						<view class="coun">{{ callPhoneLogVo.remark.length }}/20</view>
					</view>
					<view class="call_btn" @click="saveCallPhone">提交</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup
			ref="popupvideoRef"
			background-color="#fff"
			@change="urlClickShow"
		>
			<video
				:src="videoUrl"
				:enable-progress-gesture="false"
				:show-center-play-btn="false"
			></video>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref, onMounted, reactive, watch, nextTick, computed} from 'vue';
	import {onUnload, onShow, onLoad, onHide} from '@dcloudio/uni-app';
	import apiOrder from '@/util/network_api/apiOrder.js';
	import apiCode from '@/util/network_api/code.js';
	import store from '@/store_network/index.js';
	import _ from 'lodash';
	import apiAccount from '@/util/network_api/account.js';
	import TimePopup from '@/components/u-network/TimePopup.vue';
	import EditCode from './components/EditCode.vue';
	import TextLength from '@/components/TextLength.vue';
	import {moduleId as fixedModuleId} from '@/config/order';
	import apiUpload from '@/util/network_api/upload.js';
	import {useGetOrderEndStatus} from '@/services/module/order/useOrder';
	import EndInfo from './components/detail/EndInfo.vue';
	import departmentFixedData from '@/config/fixed-data/department';

	const {endStatus, getEndStatus} = useGetOrderEndStatus();

	// 结单信息组件实例
	const endInfoInstance = ref<InstanceType<typeof EndInfo> | null>(null);
	
	/**
	 * 地址复制点击事件
	 */
	const onAddressCopyClick = () => {
		if (orderDetail.value) {
			const { province, city, area, town, address } = orderDetail.value
			uni.setClipboardData({
				data: `${province || ''}-${city || ''}-${area || ''}-${town || ''}-${address || ''}`,
				success() {
					uni.showToast({
						title: '复制成功',
					});
				},
			});
		}
	}

	/**
	 * 报单信息复制按钮点击事件
	 */
	const onCreateOrderInfoCopyClick = () => {
		if (orderDetail.value) {
			// 商用复制的东西
			const storeName = `店名：${orderDetail.value.storeName || ''}`
			const feedbackPerson = `反馈人员：${orderDetail.value.repairUsername || ''}`
			const feedbackPhone = `反馈电话：${orderDetail.value.repairPhone || ''}`
			const businessPhone = `业务电话：${orderDetail.value.businessPhone || ''}`

			// 家用复制的东西
			const contactPerson = `联系人员：${orderDetail.value.repairUsername || ''}`;
			const contactPhone = `联系电话：${orderDetail.value.repairPhone || ''}`;

			// 商用和家用都要复制的东西
			const createTime = `报单时间：${orderDetail.value.gmtCreate}`;
			const expectedDoorstepTime = `期望上门时间：${
				orderDetail.value.expectedDate || ''
			} ${orderDetail.value.expectedStartTime || ''}-${
				orderDetail.value.expectedEndTime || ''
			}`;
			const desc = `工单描述：${orderDetail.value.description || ''}`;
			
			let copyConent = ''
			if (orderDetail.value.departmentId === departmentFixedData.business) {
				copyConent = `${storeName}\n${feedbackPerson}\n${feedbackPhone}\n${businessPhone}\n${createTime}\n${expectedDoorstepTime}\n${desc}`
			}
			
			if (orderDetail.value.departmentId === departmentFixedData.family) {
				copyConent = `${contactPerson}\n${contactPhone}\n${createTime}\n${expectedDoorstepTime}\n${desc}`
			}
			
			uni.setClipboardData({
				data: copyConent,
				success() {
					uni.showToast({
						title: '复制成功',
					});
				},
			});
		}
	};

	/**
	 * 获取产品质保状态对应的文本
	 * @param goodInfo - 产品信息
	 */
	const getProductWarrantuStatus = (goodInfo) => {
		if (goodInfo.status === 1) {
			return '未质保';
		}

		if (goodInfo.status === 2) {
			return '质保中';
		}

		if (goodInfo.status === 3) {
			return '已过质保';
		}

		return '已作废';
	};

	/**
	 * 产品信息复制按钮点击事件
	 * @param goodInfo - 产品信息
	 */
	const onGoodInfoCopyClick = (goodInfo) => {
		if (goodInfo) {
			const goodsName = `产品名称：${goodInfo.goodsName}`;
			const warrantyStatus = `质保状态：${getProductWarrantuStatus(goodInfo)}`;
			const surplusDay = `剩余质保：${goodInfo.surplusDay}天`;
			const goodsCode = `产品编号：${goodInfo.goodsCode}`;
			const qty = `产品数量：${goodInfo.qty}`;
			const goodsSpecName = `产品规格：${goodInfo.goodsSpecName}`;
			const dateOfProduction = `出厂日期：${goodInfo.dateOfProduction}`;
			const warrantyRange = `质保周期：${goodInfo.warrantyStartTime} ~ ${goodInfo.warrantyEndTime}`;
			const snCode = `一物一码：${goodInfo.code}`;
			uni.setClipboardData({
				data: `${goodsName}\n${warrantyStatus}\n${surplusDay}\n${goodsCode}\n${qty}\n${goodsSpecName}\n${dateOfProduction}\n${warrantyRange}\n${snCode}`,
				success() {
					uni.showToast({
						title: '复制成功',
					});
				},
			});
		}
	};

	/**
	 * 获取结单信息
	 */
	const getEndInfo = () => {
		nextTick(() => {
			if (endInfoInstance.value && orderDetail.value) {
				endInfoInstance.value.getEndTemplate(orderDetail.value.id);
			}
		});
	};

	/**
	 * 产品的条码图片和现场图片预览事件
	 * @param {Number} index - 产品索引
	 * @param {('code'|'scene')} type - 图片类型
	 */
	const handleGoodImgPreview = (index: number, type: 'code' | 'scene') => {
		const good = goodsDetail.value[index];
		const pathType = type === 'code' ? 2 : 1;
		if (good) {
			const goodAnnex = good.workGoodsAnnexVos.find(
				(item) => item.pathType === pathType,
			);
			if (goodAnnex) {
				uni.previewImage({
					urls: [goodAnnex.path],
				});
			}
		}
	};

	/**
	 * 提交结单按钮的显示状态
	 */
	const submitEndOrderBtnState = computed(() => {
		// 管理员
		if (store.state.isManager) {
			if ([5, 6, 7].includes(orderDetail.value.status)) {
				return false;
			}
			return true;
		}

		// 工程师
		if ([4, 5].includes(orderDetail.value.status)) {
			return false;
		}
		return true;
	});

	/**
	 * 设置产品条码和现场图片
	 */
	const setGoodCodeAndSceneImg = (index: number, type: 'code' | 'scene') => {
		const pathType = type === 'code' ? 2 : 1;
		const good = goodsDetail.value[index];
		const result = good.workGoodsAnnexVos.find(
			(item) => item.pathType === pathType && item.type === 1,
		);
		if (result) {
			switch (type) {
				case 'code':
					goodsDetail.value[index].codeImg = result.path;
					break;
				case 'scene':
					goodsDetail.value[index].sceneImg = result.path;
					break;
			}
			return;
		}

		switch (type) {
			case 'code':
				goodsDetail.value[index].codeImg = '';
				break;
			case 'scene':
				goodsDetail.value[index].sceneImg = '';
				break;
		}
	};

	/**
	 * 现场图片和条码上传
	 * @param index - 产品索引
	 */
	const handleUploadSceneAndCodeImg = (
		index: number,
		type: 'code' | 'scene',
	) => {
		const pathType = type === 'code' ? 2 : 1;
		uni.chooseImage({
			count: 1,
			sourceType: ['album'],
			success: async (res) => {
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				const imgUploadResult = await apiUpload.uploadOrderFile({
					files: res.tempFiles[0],
				});
				const saveResult = await apiOrder.saveGoodAnnex(
					{
						workGoodsId: goodsDetail.value[index].id,
						type: 1,
						pathType: pathType,
						path: imgUploadResult.data.rows[0],
					},
					orderDetail.value.id,
				);
				uni.hideLoading();
				if (saveResult.code === 20000) {
					uni.showToast({
						title: '保存成功',
						icon: 'none',
						mask: true,
					});
					await getNetworkOrderDetailGoodsObj(workId.value);
					setGoodCodeAndSceneImg(index, type);
					return;
				}
				uni.showToast({
					title: saveResult.message,
					icon: 'none',
					mask: true,
				});
			},
		});
	};

	/**
	 * 图片删除事件
	 * @param {Number} index - 产品索引
	 * @param {('code'|'scene')} type - 类型
	 */
	const handleImgDel = async (index: number, type: 'code' | 'scene') => {
		const goodAnnexList = goodsDetail.value[index].workGoodsAnnexVos;
		const pathType = type === 'code' ? 2 : 1;
		let errCode = 0;
		let errMsg = '';
		for (let i = 0; i < goodAnnexList.length; i++) {
			const goodAnnex = goodAnnexList[i];
			if (goodAnnex.pathType === pathType) {
				if (goodAnnex.path) {
					const delResult = await apiUpload.fileDel([goodAnnex.path]);
					if (delResult.code === 20000) {
						const saveResult = await apiOrder.saveGoodAnnex(
							{
								workGoodsId: goodAnnex.workGoodsId,
								type: 1,
								pathType,
								path: '',
							},
							orderDetail.value.id,
						);
						errCode = saveResult.code === 20000 ? 0 : 1;
						errMsg = saveResult.code === 20000 ? '' : saveResult.message;
					}
				}
			} else {
				const saveResult = await apiOrder.saveGoodAnnex(
					{
						workGoodsId: goodAnnex.workGoodsId,
						type: 1,
						pathType,
						path: '',
					},
					orderDetail.value.id,
				);
				errCode = saveResult.code === 20000 ? 0 : 1;
				errMsg = saveResult.code === 20000 ? '' : saveResult.message;
			}
		}
		if (errCode === 0) {
			uni.showToast({
				title: '保存成功',
				icon: 'none',
				mask: true,
			});
			await getNetworkOrderDetailGoodsObj(workId.value);
			setGoodCodeAndSceneImg(index, type);
			return;
		}
		uni.showToast({
			title: errMsg,
			icon: 'none',
			mask: true,
		});
	};

	/**
	 * 提交结单，只有模块为工程机才会触发这个事件
	 */
	const onSubmitEndOrder = async () => {
		for (let i = 0; i < goodsDetail.value.length; i++) {
			const good = goodsDetail.value[i];
			const codeImg = good.workGoodsAnnexVos.find(
				(item) => item.pathType === 2,
			);
			const sceneImg = good.workGoodsAnnexVos.find(
				(item) => item.pathType === 1,
			);
			if (!codeImg || !codeImg.path) {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: `请上传产品${i + 1}的条码图片`,
				});
				return;
			}

			if (!sceneImg || !sceneImg.path) {
				uni.showToast({
					mask: true,
					icon: 'none',
					title: `请上传产品${i + 1}的现场图片`,
				});
				return;
			}
		}

		uni.showLoading({
			mask: true,
			title: '加载中',
		});
		const res = await apiOrder.networkApplyFinishOrder(
			{
				faultReason: [],
				faultRelationVos: [],
				faultTypeRelationVos: [],
				id: orderDetail.value.finishOrderId,
				moduleId: orderDetail.value.moduleId,
				remark: '',
				reviewRemark: '',
				solution: [],
				statementWriteOffCode: '',
				templateVos: [],
				workGoodsAnnexVos: [],
			},
			orderDetail.value.id,
		);
		uni.hideLoading();

		if (res.code === 20000) {
			uni.showToast({
				title: '提交成功',
				mask: true,
				icon: 'none',
			});
			switchTab('order');
			return;
		}

		uni.showToast({
			title: res.message,
			mask: true,
			icon: 'none',
		});
	};

	const tabsList = ref<
		Array<{
			status: 1 | 2 | 3 | 4;
			name: string;
			value: 'order' | 'good' | 'fee' | 'log';
		}>
	>([
		{
			status: 1,
			name: '工单信息',
			value: 'order',
		},
		{
			status: 3,
			name: '产品信息',
			value: 'good',
		},
		{
			status: 4,
			name: '费用信息',
			value: 'fee',
		},
		{
			status: 2,
			name: '工单进展',
			value: 'log',
		},
	]);

	//工程师
	const statusList2 = ref([
		{status: 1, name: '待接单', color: '#f56c6c', bg: '#fdf2ff'},
		{status: 2, name: '服务中', color: '#007cff', bg: '#f2f9ff'},
		{status: 3, name: '待结单', color: '#e69103', bg: '#fffaf0'},
		{status: 4, name: '已完成', color: '#007cff', bg: '#f2f9ff'},
		{status: 5, name: '已取消', color: '#999', bg: '#eee'},
		{status: 50, name: '待结算', color: '#e69103', bg: '#fffaf0'},
	]);
	const statusList = ref([
		{status: 1, name: '待接单', color: '#f56c6c', bg: '#fdf2ff'},
		{name: '待派工', status: 2, color: '#e69103', bg: '#fffaf0'},
		{name: '待工程师接单', status: 3, color: '#e69103', bg: '#fffaf0'},
		{name: '服务中', status: 4, color: '#007cff', bg: '#f2f9ff'},
		{name: '待结单', status: 5, color: '#e69103', bg: '#fffaf0'},
		{name: '已完成', status: 6, color: '#007cff', bg: '#f2f9ff'},
		{name: '已取消', status: 7, color: '#999', bg: '#eee'},
		{name: '待结算', status: 50, color: '#e69103', bg: '#fffaf0'},
	]);

	/**
	 * 判断当前工单是否在服务中
	 */
	const isCurrentOrderInService = computed(() => {
		if (!orderDetail.value) {
			return false;
		}

		if (store.state.isManager) {
			return orderDetail.value.status === 4;
		}

		return orderDetail.value.status === 2;
	});

	const moreIcons = ref([]);
	const moreIconsList = ref([
		{name: '拨打电话', status: 112},
		{name: '预约时间', status: 1},
		// { name: '签到', status: 2 },
		// { name: '申请费用', status: 3 },
		// { name: '申请配件', status: 4 },
		// {name: '修改工单', status: 12},
		// {name: '完工申请', status: 5},
		{name: '申请费用', status: 113},
		{name: '申请配件', status: 114},
		// { name: '客户结算', status: 6 },
		// { name: '留言', status: 7 },
		// { name: '申请转单', status: 8 },
		// { name: '申请挂起', status: 9 },
		// { name: '改服务商', status: 10 },
		// {name: '更多', status: 11},
	]);
	const moreIcons2 = ref([
		{name: '申请费用', status: 3},
		{name: '申请配件', status: 4},
		{name: '签到', status: 2},
	]);
	const callTypeList = ref([
		{text: '拨打成功', value: 1},
		{text: '无人接听', value: 2},
		{text: '其他原因', value: 3},
	]);
	const orderDetail = ref(null); //工单详情
	const DetailContentObj = ref(null);
	const goodsDetail = ref([]); //产品详情
	const goodsList = ref();
	const popupGoodsCode = ref(false); //产品编码展示
	const currentTab = ref(0); //当前标题index
	const showTimeRef = ref();
	const showpopup = ref(false); //改约日期弹窗
	const shareRef = ref(); //更多弹窗
	const changeNetworkEmpDialog = ref(); //改工程师
	const remark = ref('');
	const status = ref([]);
	const isCallPhone = ref(false); //记录是否拨打
	const callPhoneRef = ref(); //填写拨打记录弹窗
	const callPhoneLogVo = ref({
		callPhoneResult: 1, //	拨打结果：1-拨打成功，2-无人接听，3-其他原因
		remark: '',
		date: '',
		nextCallPhoneDate: '', //下次拨打电话时间
		reservationEndTime: '',
		reservationStartTime: '',
	});
	const typeList = ref([
		{text: '申请转服务商', value: 1},
		{text: '取消工单', value: 2},
	]);
	const urlClickShow = (v) => {
		if (!v.show) videoUrl.value = '';
	};

	// 获取修改SN码权限
	const is_EditSN = ref(false);
	const getNetworkUpudateSnCodeRoot = async () => {
		await apiOrder.getNetworkUpudateSnCodeRoot().then((res) => {
			if (res.code == 20000) {
				if (
					store.state.isManager
						? [1, 2, 3, 4].includes(orderDetail.value.status)
						: [1, 2].includes(orderDetail.value.status)
				) {
					is_EditSN.value = res.data.row.updateSnCode;
				}
			}
		});
	};
	const typeBtn = ref(false);
	const changeType = () => {
		typeBtn.value = true;
	};
	const onClickMore = (index) => {
		typeBtn.value = false;
		if (index === 0) {
			changeNetworkDialog.value.open();
		} else if (index === 1) {
			cancelShow();
		}
	};
	const isFeeShow = ref(true); //费用信息显示收起
	const isSpareShow = ref(true); //配件信息显示收起

	// 激活的标签名
	const activeTabName = ref<'order' | 'good' | 'fee' | 'log'>('order');

	/**
	 * 标签切换事件
	 * @param {'order'|'good'|'fee'|'log'} tabName - 标签名
	 */
	const switchTab = async (tabName: 'order' | 'good' | 'fee' | 'log') => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});

		activeTabName.value = tabName;

		if (tabName === 'order') {
			await getNeworkOrderDetailObj(workId.value);
			await getNetworkOrderDetailContentObj(workId.value);
			if (
				store.state.isManager
					? orderDetail.value.status == 4
					: orderDetail.value.status == 2
			) {
				shareShow();
			}
		}

		if (tabName === 'good') {
			await getNetworkUpudateSnCodeRoot();
			await getNetworkOrderDetailGoodsObj(workId.value);
		}

		if (tabName === 'fee') {
			const res = await apiOrder.getOrderFeeInfo(workId.value);
			if (res.code == 20000) {
				getFeeInfo.value = res.data.rows;
			}
		}

		if (tabName === 'log') {
			await getLogList();
		}

		uni.hideLoading();
	};

	// Tab切换内容
	async function swichMenu(index: number) {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});

		/**
		 * 因为标签的是按顺序来渲染的
		 * 工程师是没有费用信息标签的，所以工单进展标签的索引是2
		 * 管理员是有费用信息标签的，所以工单进展标签的索引是3
		 * 而工单进展面板是当索引为3时才显示，所以工程师时点击工单进展标签就要将索引更改为3
		 */
		if (!store.state.isManager && index === 2) {
			index = 3;
		}
		currentTab.value = index;

		switch (index) {
			case 0:
				Promise.all([
					getNeworkOrderDetailObj(workId.value),
					getNetworkOrderDetailContentObj(workId.value),
				]).then((res) => {
					if (
						store.state.isManager
							? orderDetail.value.status == 4
							: orderDetail.value.status == 2
					) {
						shareShow();
					}
					uni.hideLoading();
				});
				break;
			case 1:
				await getNetworkUpudateSnCodeRoot();
				getNetworkOrderDetailGoodsObj(workId.value);
				uni.hideLoading();
				break;
			case 2:
				apiOrder.getOrderFeeInfo(workId.value).then((res) => {
					if (res.code == 20000) {
						getFeeInfo.value = res.data.rows;
					}
					uni.hideLoading();
				});
				break;
			case 3:
				getLogListParam.value.page = 1;
				getLogList();
				break;
		}
	}
	const workId = ref(null); //工单Id
	// 费用详情
	const getFeeInfo = ref(null);

	// *******拨打预约时间******
	const showpopupCall = ref(false);
	const timeObjCall = ref();
	const setTimeObjCall = ref({
		reservationTimeType: 3, //1-不启用，2-24小时，3-预约时间范围”
		reservationStartTime: '08:00',
		reservationEndTime: '22:00',
	});
	// 设置弹窗
	const showpopupValueCall = (val) => {
		showpopupCall.value = val;
		callPhoneRef.value.open('bottom');
	};
	const valueChangeCall = (val) => {
		timeObjCall.value = null;
		timeObjCall.value = val;
		if (callPhoneLogVo.value.callPhoneResult == 1) {
			callPhoneLogVo.value.date = timeObjCall.value.dateVal.date;
			callPhoneLogVo.value.nextCallPhoneDate = '';
		} else if (callPhoneLogVo.value.callPhoneResult == 2) {
			callPhoneLogVo.value.nextCallPhoneDate = timeObjCall.value.dateVal.date;
			callPhoneLogVo.value.date = '';
		}
		callPhoneLogVo.value.reservationStartTime =
			timeObjCall.value.time.split('~')[0];
		callPhoneLogVo.value.reservationEndTime =
			timeObjCall.value.time.split('~')[1];
	};
	const showpopupSeletCall = () => {
		showpopupCall.value = true;
		callPhoneRef.value.close();
	};

	// 查看视频
	const popupvideoRef = ref();
	const videoUrl = ref('');
	const videoUrlShow = (url) => {
		videoUrl.value = url;
		popupvideoRef.value.open();
	};
	// 处理隐藏手机号
	function setPhone(str: string) {
		if (!str.trim()) {
			return '';
		}

		let tem = str.trim().slice(0, 3) + '****' + str.trim().slice(str.length - 4);
		return tem;
	}
	//关闭填写拨打记录弹窗
	const closeCallPhonePopup = () => {
		callPhoneRef.value.close();
	};
	// 保存拨打记录
	const saveCallPhone = () => {
		if (callPhoneLogVo.value.callPhoneResult == 3) {
			if (!callPhoneLogVo.value.remark) {
				uni.showToast({
					title: '请填写备注',
					icon: 'none',
				});
				return;
			}
			callPhoneLogVo.value.reservationStartTime = '';
			callPhoneLogVo.value.reservationEndTime = '';
			callPhoneLogVo.value.date = '';
			callPhoneLogVo.value.nextCallPhoneDate = '';
		} else {
			if (
				!callPhoneLogVo.value.date &&
				callPhoneLogVo.value.callPhoneResult == 1
			) {
				uni.showToast({
					title: '请先选择预约时间',
					icon: 'none',
				});
				return;
			}
			callPhoneLogVo.value.remark = '';
		}
		apiOrder
			.saveCallPhoneLog(callPhoneLogVo.value, workId.value)
			.then((res) => {
				if (res.code == 20000) {
					uni.showToast({
						title: res.message,
						icon: 'none',
					});
					isCallPhone.value = false;
					callPhoneLogVo.value.remark = '';
					callPhoneLogVo.value.reservationStartTime = '';
					callPhoneLogVo.value.reservationEndTime = '';
					callPhoneLogVo.value.date = '';
					callPhoneLogVo.value.nextCallPhoneDate = '';
					timeObjCall.value = null;
					callPhoneRef.value.close();
					// swichMenu(0);
					switchTab('order');
				}
			});
	};
	const lookFee = ref(true);
	onShow(async (e) => {
		// 派工返回刷新页面
		if (uni.getStorageSync('order_detail') == 1) {
			// swichMenu(0);
			switchTab('order');
			uni.removeStorageSync('order_detail');
		}
		// 费用查看权限
		apiAccount.getSelectFeeRoot().then((res) => {
			if (res.code == 20000) {
				lookFee.value = res.data.row;
				if (res.data.row) {
					tabsList.value = [
						{
							status: 1,
							name: '工单信息',
							value: 'order',
						},
						{
							status: 3,
							name: '产品信息',
							value: 'good',
						},
						{
							status: 4,
							name: '费用信息',
							value: 'fee',
						},
						{
							status: 2,
							name: '工单进展',
							value: 'log',
						},
					];
				} else {
					tabsList.value = [
						{
							status: 1,
							name: '工单信息',
							value: 'order',
						},
						{
							status: 3,
							name: '产品信息',
							value: 'good',
						},
						{
							status: 2,
							name: '工单进展',
							value: 'log',
						},
					];
				}
			}
		});
	});
	// 调起拨打电话的功能
	const makePhoneCall = (phoneNumber: string) => {
		if (
			isCallPhone.value &&
			orderDetail.value.callPhoneType == 1 &&
			!orderDetail.value.writeCallPhoneResult
		) {
			uni.showToast({
				title: '请先填写拨打结果',
				icon: 'none',
			});
			return;
		}
		callNumber(phoneNumber);
	};
	function callNumber(phoneNumber: string) {
		apiOrder.saveTriggerCallPhone(workId.value).then((res) => {
			if (res.code == 20000) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					success: (res) => {
						Promise.all([
							getNeworkOrderDetailObj(workId.value),
							getNetworkOrderDetailContentObj(workId.value),
						]).then((res) => {
							if (
								store.state.isManager
									? orderDetail.value.status == 4
									: orderDetail.value.status == 2
							) {
								shareShow();
							}
							callPhoneRef.value.open('bottom');
							isCallPhone.value = true;
							uni.hideLoading();
						});
					},
					fail: () => {
						// console.error('拨打电话失败！');
					},
				});
			}
		});
	}
	// 调取地理位置导航
	const getLocation = () => {
		uni.showLoading({
			title: '加载...',
			mask: true,
		});
		let address =
			orderDetail.value?.province +
			orderDetail.value?.city +
			orderDetail.value?.area +
			orderDetail.value.town +
			orderDetail.value?.address;
		uni
			.request({
				url: ` https://restapi.amap.com/v3/geocode/geo?key=${store.state.key}&address=${address}`,
				method: 'GET',
			})
			.then((res) => {
				let addressObj: any = res.data;
				// 使用地图查看位置
				uni.openLocation({
					latitude: Number(
						Number(addressObj.geocodes[0].location.split(',')[1]).toFixed(6),
					),
					longitude: Number(
						Number(addressObj.geocodes[0].location.split(',')[0]).toFixed(6),
					),
					address:
						orderDetail.value?.province +
						orderDetail.value?.city +
						orderDetail.value?.area +
						orderDetail.value.town,
					name: orderDetail.value?.address,
					success: (res) => {},
					// 调用失败时的回调函数
					fail: function (res) {
						uni.showToast({
							icon: 'none',
							title: res,
						});
					},
				});
				uni.hideLoading();
			});
	};
	// 查看附件
	const lookPDF = (url) => {
		uni.openDocument({
			filePath: url,
			fileType: 'pdf',
			success: function (res) {},
			fail: function (err) {
				uni.showToast({
					icon: 'none',
					title: err,
				});
			},
		});
	};
	// 预览图片
	const lookImg = (urls: any, index) => {
		uni.previewImage({
			urls: urls,
			current: index,
			indicator: 'number',
			// 先下载图片
			longPressActions: {
				itemList: ['保存图片'],
				success: function (data) {
					var url = urls[data.index];
					// 先下载图片
					uni.downloadFile({
						url,
						success: (res) => {
							// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({title: '保存成功！', icon: 'none'});
								},
								fail: () => {
									uni.showToast({title: '保存失败', icon: 'none'});
								},
							});
						},
					});
				},
			},
		});
	};
	// 完工申请驳回信息
	const EditFinishOrderInfo = (id) => {
		uni.navigateTo({
			url:
				'/pages_network/order/applyOrder?workId=' +
				workId.value +
				'&is_edit=true&finishOrderInfo=' +
				id,
		});
	};
	// 编辑修改工单信息
	const EditOrderInfo = () => {
		if (workId.value && orderDetail.value.finishOrderId) {
			uni.navigateTo({
				url: `/pages_network/order/applyOrder?workId=${workId.value}&is_edit=true&finishOrderInfo=${orderDetail.value.finishOrderId}`,
			});
		}
	};
	// 产品一物一码展示
	const showGoodsCode = async (item) => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		await apiOrder.getNetworkOrderDetailGoodsCode(item.id).then((res) => {
			if (res.code == 20000) {
				goodsList.value = {...item, codes: res.data.row};
			}
		});
		uni.hideLoading();
		popupGoodsCode.value = true;
	};
	// 复制
	const copy = (val: any) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'success',
				});
			},
		});
	};
	// 获取工单详情
	const getNeworkOrderDetailObj = async (id) => {
		await apiOrder.getNeworkOrderDetail(id).then((res) => {
			if (res.code == 20000) {
				orderDetail.value = res.data.row;
				if (store.state.isManager) {
					if (
						!statusList.value.some((o) => o.status == orderDetail.value.status)
					) {
						uni.reLaunch({
							url: '/pages_network/order/order',
						});
					}
				} else {
					if (
						!statusList2.value.some((o) => o.status == orderDetail.value.status)
					) {
						uni.reLaunch({
							url: '/pages_network/order/order',
						});
					}
				}
			}
		});
	};
	// 获取工单详情-工单
	const getNetworkOrderDetailContentObj = async (id) => {
		await apiOrder.getNetworkOrderDetailContent(id).then((res) => {
			if (res.code == 20000) {
				DetailContentObj.value = res.data.row;
			}
		});
	};
	// 审核
	const checkOrder = () => {
		uni.redirectTo({
			url:
				'/pages_network/order/checkOrder?workId=' +
				workId.value +
				'&networkEngineerId=' +
				orderDetail.value.networkEngineerId,
		});
	};
	/* 产品信息 */
	const getNetworkOrderDetailGoodsObj = async (id) => {
		await apiOrder.getNetworkOrderDetailGoods(id).then((res) => {
			if (res.code == 20000) {
				goodsDetail.value = res.data.row;
				goodsDetail.value.forEach((good, goodIndex) => {
					setGoodCodeAndSceneImg(goodIndex, 'code');
					setGoodCodeAndSceneImg(goodIndex, 'scene');
				});
			}
		});
	};
	/* 工单取消弹窗 */
	const inputDialog = ref();
	const cancelShow = () => {
		inputDialog.value.open();
	};
	//提交取消
	const dialogInputConfirm = async (val) => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		let data = {remark: val};
		await apiOrder.networkApplyCancelOrder(data, workId.value).then((res) => {
			if (res.code == 20000) {
				inputDialog.value.close();
				Promise.all([
					getNeworkOrderDetailObj(workId.value),
					getNetworkOrderDetailContentObj(workId.value),
				]).then((res) => {
					if (
						store.state.isManager
							? orderDetail.value.status == 4
							: orderDetail.value.status == 2
					) {
						shareShow();
					}
					uni.hideLoading();
				});
				uni.showToast({
					title: res.message,
					icon: 'none',
				});
			}
		});
		uni.hideLoading();
	};
	/* 拒绝接单 */
	const inputDialog_rej = ref();
	const rejectiveShow = () => {
		inputDialog_rej.value.open();
	};
	// 提交拒绝
	const dialogInputConfirmRej = async (val) => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		let data = {remark: val};
		await apiOrder.networkRefuseReceiveOrder(data, workId.value).then((res) => {
			if (res.code == 20000) {
				uni.hideLoading();
				inputDialog_rej.value.close();
				uni.showToast({
					title: res.message,
					icon: 'none',
				});
				uni.redirectTo({
					url: '/pages_network/order/order?workId=' + workId.value,
				});
			}
		});
		uni.hideLoading();
	};
	// 申请改服务商
	const changeNetworkDialog = ref();
	const changeNetworkConfirm = async (val) => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		let data = {remark: val};
		await apiOrder.networkApplyChangeNetwork(data, workId.value).then((res) => {
			if (res.code == 20000) {
				changeNetworkDialog.value.close();
				Promise.all([
					getNeworkOrderDetailObj(workId.value),
					getNetworkOrderDetailContentObj(workId.value),
				]).then((res) => {
					if (
						store.state.isManager
							? orderDetail.value.status == 4
							: orderDetail.value.status == 2
					) {
						shareShow();
					}
					uni.hideLoading();
				});
				uni.showToast({
					title: res.message,
					icon: 'none',
				});
			}
		});
		uni.hideLoading();
	};
	// 改工程师
	const changeNetworkEmpConfirm = async (val) => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		let data = {remark: val};
		await apiOrder
			.networkApplyTransferEngineer(data, workId.value)
			.then((res) => {
				if (res.code == 20000) {
					changeNetworkEmpDialog.value.close();
					Promise.all([
						getNeworkOrderDetailObj(workId.value),
						getNetworkOrderDetailContentObj(workId.value),
					]).then((res) => {
						if (
							store.state.isManager
								? orderDetail.value.status == 4
								: orderDetail.value.status == 2
						) {
							shareShow();
						}
						uni.hideLoading();
					});
					uni.showToast({
						title: res.message,
						icon: 'none',
					});
				}
			});
		uni.hideLoading();
	};
	// 确认接单
	const rejectiveYes = async () => {
		uni
			.showModal({
				title: '提示',
				content: '确认接单？',
			})
			.then(async (res) => {
				//确认
				if (res.confirm) {
					uni.showLoading({
						title: '加载中...',
						mask: true,
					});
					await apiOrder.networkSureReceiveOrder(workId.value).then((res) => {
						if (res.code == 20000) {
							Promise.all([
								getNeworkOrderDetailObj(workId.value),
								getNetworkOrderDetailContentObj(workId.value),
							]).then((res) => {
								if (
									store.state.isManager
										? orderDetail.value.status == 4
										: orderDetail.value.status == 2
								) {
									shareShow();
								}
								uni.hideLoading();
							});
							uni.showToast({
								title: res.message,
								icon: 'none',
							});
						}
					});
					uni.hideLoading();
				}
			});
	};
	// 解除挂载
	const networkEmpRestartSuspend = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		await apiOrder.networkEmpRestartSuspendOrder(workId.value).then((res) => {
			if (res.code == 20000) {
				Promise.all([
					getNeworkOrderDetailObj(workId.value),
					getNetworkOrderDetailContentObj(workId.value),
				]).then((res) => {
					if (
						store.state.isManager
							? orderDetail.value.status == 4
							: orderDetail.value.status == 2
					) {
						shareShow();
					}
					uni.hideLoading();
				});
				uni.showToast({
					title: '取消挂起',
					icon: 'success',
				});
			}
		});
		uni.hideLoading();
	};
	// 分派工程师
	const AssignmentEngineer = () => {
		uni.redirectTo({
			url: '/pages_network/order/networkEmp/networkEmp?workId=' + workId.value,
		});
	};
	// 获取预约时间范围
	const setTimeObj = ref({
		reservationTimeType: 2, //1-不启用，2-24小时，3-预约时间范围”
		reservationStartTime: '',
		reservationEndTime: '',
	});

	// 更多功能显示
	const shareShow = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		if (store.state.isManager) {
			if (!orderDetail.value?.engineer) {
				moreIcons.value = moreIconsList.value.filter((o) => !(o.status == 8)); //管理员不是工程师 没有申请转单
				moreIcons.value = moreIcons.value.filter((o) => !(o.status == 9)); //管理员不是工程师 没有挂起
				moreIcons2.value = moreIcons2.value.filter((o) => !(o.status == 2)); //工程师才有签到
			} else {
				moreIcons.value = moreIconsList.value;
				moreIcons2.value = [
					{name: '申请费用', status: 3},
					{name: '申请配件', status: 4},
					{name: '签到', status: 2},
				];
			}
		} else {
			moreIcons.value = moreIconsList.value.filter((o) => !(o.status == 10));
		}
		Promise.all([setSign(), setTime(), getOrderSuspendConfigFun()]).then(() => {
			uni.hideLoading();
			// shareRef.value.open()
		});
	};
	//判断是否开启签到
	const setSign = async () => {
		await apiOrder.getNetworkEmpIsEnableSign(workId.value).then((res) => {
			if (res.code == 20000) {
				if (!res.data.row.enableSign) {
					// moreIcons.value = moreIcons.value.filter(o => !(o.status == 2))
					moreIcons2.value = moreIcons2.value.filter((o) => !(o.status == 2)); //工程师才有签到
				}
			}
		});
	};
	// 判断是否开启预约时间
	const setTime = async () => {
		await apiOrder.getNetworkReservationTimeRange(workId.value).then((res) => {
			if (res.code == 20000) {
				setTimeObj.value = res.data.row;
				if (setTimeObj.value.reservationTimeType == 1) {
					moreIcons.value = moreIcons.value.filter((o) => o.status != 1);
				}
			}
		});
	};
	// 判断工程师是否启用挂载
	const getOrderSuspendConfigFun = () => {
		apiOrder.getOrderSuspendConfig(workId.value).then((res) => {
			if (res.code == 20000) {
				if (!res.data.row.enableSuspend) {
					moreIcons.value = moreIcons.value.filter((o) => o.status != 9);
				}
			}
		});
	};
	// 关闭预约时间 显示弹窗
	const closePopup = () => {
		showTimeRef.value.close();
		// shareShow()
	};
	//显示选择预约时间弹窗
	const showpopupSelet = () => {
		showpopup.value = true;
		showTimeRef.value.close();
	};
	// 设置showpopup
	const showpopupValue = (val) => {
		showpopup.value = val;
		showTimeRef.value.open();
	};
	// 预约时间选择的值
	const timeObj = ref(null);
	const valueChange = (obj) => {
		timeObj.value = obj;
	};
	// 确定预约时间
	const timeSubmit = () => {
		if (workId.value) {
			let data = {
				date: timeObj.value.dateVal.date,
				reservationEndTime: timeObj.value.time.split('~')[1],
				reservationStartTime: timeObj.value.time.split('~')[0],
				remark: '',
				workId: workId.value,
			};
			uni.showLoading({
				title: '加载中...',
				mask: true,
			});
			apiOrder.networkReservationTime(data).then((res) => {
				if (res.code == 20000) {
					Promise.all([
						getNeworkOrderDetailObj(workId.value),
						getNetworkOrderDetailContentObj(workId.value),
					]).then((res) => {
						if (
							store.state.isManager
								? orderDetail.value.status == 4
								: orderDetail.value.status == 2
						) {
							shareShow();
						}
						uni.hideLoading();
					});
					uni.showToast({
						icon: 'success',
						title: res.message,
					});
					timeObj.value = null;
					showTimeRef.value.close();
				}
			});
		}
	};

	/**
	 * 申请结单点击事件
	 */
	const handleEndApplyClick = () => {
		if (!orderDetail.value) {
			return false;
		}

		if (store.state.userInfo.id != orderDetail.value.networkEngineerId) {
			uni.showModal({
				title: '提示',
				content: '您不是当前工单负责人，禁止结单！',
				showCancel: false,
				success: (res) => {
					if (res.confirm) {
						return;
					}
				},
			});
			return;
		}

		if (goodsDetail.value.some((o) => !o.code)) {
			uni.showModal({
				title: '提示',
				content: '部分产品没有条码，结单前请先添加条码',
				confirmText: '确认',
				success: (res) => {
					if (res.confirm) {
						// swichMenu(1);
						switchTab('good');
					}
				},
			});
			return;
		}

		const {departmentId, moduleId} = orderDetail.value;
		uni.navigateTo({
			url: `/pages_network/order/applyOrder?workId=${
				workId.value
			}&departmentId=${departmentId}&moduleId=${moduleId}&status=${2}`,
		});
	};

	// 点击按钮
	// const is_share_content_item_active = ref()
	// 更多功能
	const onShare = (item) => {
		if ([3, 4, 5, 7, 113, 114].includes(item.status)) {
			if (
				(orderDetail.value.callPhoneType == 1 &&
					!orderDetail.value.writeCallPhoneResult) ||
				(!orderDetail.value?.reservation &&
					setTimeObj.value.reservationTimeType != 1)
			) {
				if (
					orderDetail.value.callPhoneType == 1 &&
					!orderDetail.value.writeCallPhoneResult
				) {
					uni.showToast({
						title: '请先拨打，填写拨打结果',
						icon: 'none',
					});
					return;
				} else {
					if (
						!orderDetail.value?.reservation &&
						setTimeObj.value.reservationTimeType != 1
					) {
						uni.showToast({
							title: '请先填写预约时间',
							icon: 'none',
						});
						return;
					}
				}
			}
		}
		// is_share_content_item_active.value = item.status
		// setTimeout(() => {
		// 	is_share_content_item_active.value =null
		// }, 200)
		switch (item.status) {
			case 112:
				makePhoneCall(orderDetail.value?.userPhone);
				break;
			case 1:
				if (
					orderDetail.value.callPhoneType == 1 &&
					!orderDetail.value.writeCallPhoneResult
				) {
					uni.showToast({
						title: '请先拨打，填写拨打结果',
						icon: 'none',
					});
					return;
				}
				showTimeRef.value.open();
				break;
			case 2:
				let text =
					orderDetail.value?.province +
					orderDetail.value?.city +
					orderDetail.value?.area +
					orderDetail.value.town +
					orderDetail.value?.address;
				uni.navigateTo({
					url:
						'/pages_network/order/location/location?workId=' +
						workId.value +
						'&dispatchEngineerId=' +
						orderDetail.value?.dispatchEngineerId +
						'&address=' +
						text,
				});
				break;
			case 3:
			case 113:
				uni.navigateTo({
					url: '/pages_network/order/applyFee?workId=' + workId.value,
				});
				shareRef.value.close();
				break;
			case 4:
			case 114:
				uni.navigateTo({
					url: '/pages_network/order/applySpare?workId=' + workId.value,
				});
				shareRef.value.close();
				break;
			// case 6:
			// 	break;
			case 7:
				uni.navigateTo({
					url: '/pages_network/message/inputSend?workId=' + workId.value,
				});
				break;
			case 8:
				changeNetworkEmpDialog.value.open();
				break;
			case 9:
				uni.navigateTo({
					url: '/pages_network/order/applyHangup?workId=' + workId.value,
				});
				break;
			case 10:
				changeNetworkDialog.value.open();
				break;
			case 11:
				shareRef.value.open();
				break;
			case 12:
				// 初始化数据
				store.commit('setorderGoodsTypes', []);
				store.commit('setWayType', {});
				store.commit('setcheckBrandItem', {id: null});
				store.commit('setcheckClassifyItem', {id: null});
				store.commit('setappointmentTime', null);
				store.commit('setUserOrder', {
					address: '', //客户详细地址
					area: '', //地址-县/区
					city: '', //地址-市
					helpOtherCreateOrder: false, //	是否代他人建单：0-否，1-是
					name: '', //客户姓名
					otherPhone: '', //其他电话
					phone: '', //客户手机号
					province: '', //地址-省
					town: '', //地址-镇
					userId: null,
				});

				if (orderDetail.value.moduleId === fixedModuleId.engineerMachine) {
					uni.navigateTo({
						url:
							'/pages_network/home/addOrder/engineerMachine/add?workId=' +
							workId.value,
					});
				} else {
					uni.navigateTo({
						url: '/pages_network/home/addOrder/add?workId=' + workId.value,
					});
				}
				break;
		}
	};

	// 工单进展
	const logListData = ref({rows: [], total: 0});

	// 获取工单日志列表请求参数
	const getLogListParam = ref({
		limit: 0,
		page: 1,
	});

	/**
	 * 获取工单日志列表
	 */
	const getLogList = async () => {
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});
		const res = await apiOrder.getNetworkOrderLog(
			getLogListParam.value,
			workId.value,
		);
		uni.hideLoading();
		if (res.code == 20000) {
			if (getLogListParam.value.page == 1) {
				logListData.value = res.data;
			} else {
				logListData.value.rows = [...logListData.value.rows, ...res.data.rows];
				logListData.value.total = res.data.total;
			}
		}
	};

	/**
	 * 日志列表滚动到底部时触发
	 */
	const handleLogListScrolltolower = () => {
		if (!logListData.value) {
			return false;
		}

		const {total, rows} = logListData.value;
		if (currentTab.value == 1 && total && rows && total > rows.length) {
			getLogListParam.value.page += 1;
			getLogList();
		}
	};

	// 下拉刷新触发
	const triggered = ref(false);
	const refresherpulling = (e) => {
		if (e.detail.deltaY < 0) return; // 防止上滑页面也触发下拉
		triggered.value = true;
	};
	const onRefresh = _.debounce(
		async () => {
			// await swichMenu(currentTab.value);
			await switchTab(activeTabName.value);
			setTimeout(() => {
				triggered.value = false;
			}, 500);
		},
		600,
		{leading: false},
	);

	onLoad(async (e) => {
		if (!e.workId) return;
		workId.value = e.workId;
		uni.showLoading({
			title: '加载中...',
			mask: true,
		});

		// 获取用户信息
		await store.dispatch('getUpdataUser');
		if (store.state.isManager) {
			status.value = statusList.value;
		} else {
			status.value = statusList2.value;
		}

		await getEndStatus(e.workId);
		await getNeworkOrderDetailObj(e.workId);
		await getNetworkOrderDetailContentObj(e.workId);
		await getNetworkUpudateSnCodeRoot();
		await getNetworkOrderDetailGoodsObj(workId.value);
		uni.hideLoading();
		getEndInfo();

		if (store.state.isManager == true && orderDetail.value.status == 4) {
			shareShow();
		}

		if (store.state.isManager == false && orderDetail.value.status == 2) {
			shareShow();
		}
	});

	onUnload(() => {
		uni.hideLoading();
	});
</script>

<style lang="scss" scoped>
	.engineer-machine-end-order-btn-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 24rpx;

		.btn {
			height: 72rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #007cff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
		}
	}

	.order_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.input_popup {
			display: flex;
			flex-direction: column;
			flex: 1;

			.red_tip_title {
				color: #f53f3f;
				font-size: 24rpx;
				margin-top: 14rpx;
			}
		}

		.mask_more {
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			position: absolute;
			z-index: 9999;

			.btn_more {
				position: absolute;
				bottom: 120rpx;
				background-color: #fff;
				box-shadow: 0 0 10rpx 1rpx #ccc;
				right: 48rpx;

				.text_sty {
					font-size: 32rpx;
					padding: 22rpx;
					text-align: center;

					&:first-child {
						border-bottom: 1rpx solid #ccc;
					}
				}

				&::after {
					content: '';
					border-left: 12rpx solid transparent;
					border-right: 12rpx solid transparent;
					border-top: 12rpx solid #ccc;
					position: absolute;
					bottom: -12rpx;
					right: 20%;
				}
			}
		}

		.body-view {
			display: flex;
			flex: 1;
			flex-direction: column;
			position: relative;

			:deep(.uni-scroll-view) {
				-ms-overflow-style: none;
				/* IE and Edge */
				scrollbar-width: none;

				/* Firefox */
				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background-color: transparent;
				}
			}

			:deep(.uni-section) {
				.uni-section-header {
					padding: 0;
				}
			}

			.top-menu-view {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				background-color: #ffffff;
				height: 88rpx;
				line-height: 88rpx;
				border-bottom: 1rpx solid #d8dbe6;
				position: fixed;
				z-index: 2;

				.menu-topic-view {
					display: inline-block;
					height: 86rpx;
					position: relative;

					.menu-topic-text {
						font-size: 28rpx;
						color: #000;
						display: flex;
						justify-content: center;
						box-sizing: border-box;
						margin: 0 20rpx;
						position: relative;
						z-index: 2;
						font-weight: 700;
					}

					.menu-topic-bottom {
						position: absolute;
						bottom: 4rpx;
						left: 0;
						right: 0;
						margin: 0 20rpx;

						.menu-topic-bottom-color {
							width: 100%;
							height: 4rpx;
						}
					}

					.menu-topic,
					.menu-topic-act {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}

					.menu-topic-act {
						.menu-topic-text {
							font-weight: 700;
							color: #007cff;
							display: flex;
							justify-content: center;
						}

						.menu-topic-bottom {
							display: flex;
							justify-content: center;
						}

						.menu-topic-bottom-color {
							background: #007cff;
						}
					}
				}
			}

			.swiper-box-list {
				// width: 100%;
				flex: 1;
				margin-top: 86rpx;

				.swiper-topic-list {
					width: 100%;

					.scroll_content {
						height: 100%;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;

						.scroll-view_list {
							height: 0;
							flex: 1;

							.list-item_content {
								padding-bottom: 220rpx;
								height: 100%;
								box-sizing: border-box;
								overflow-y: auto;

								.list-item_info_fee {
									background-color: #ffffff;
									margin: 24rpx;
									padding: 24rpx;
									font-size: 28rpx;
									border-radius: 4rpx;
									display: flex;
									flex-direction: column;
									row-gap: 24rpx;

									.down_up {
										width: 0;
										height: 0;
										border-right: 12rpx solid transparent;
										border-left: 12rpx solid transparent;
										border-top: 14rpx solid #999;
										margin-left: 32rpx;
									}

									.down_up_ {
										width: 0;
										height: 0;
										border-right: 12rpx solid transparent;
										border-left: 12rpx solid transparent;
										border-bottom: 14rpx solid #999;
										margin-left: 32rpx;
									}

									.th {
										font-size: 24rpx;
										text-align: center;
										// color: #666;
									}

									.td {
										text-align: center;
										font-size: 24rpx;
									}

									.lable {
										display: flex;
										align-items: center;
									}
								}
							}

							.notice_bar {
								font-size: 28rpx;
								color: #f53f3f;
								background-color: rgba(255, 236, 232, 1);
								height: 72rpx;
								line-height: 72rpx;
								padding: 0 24rpx;
								display: flex;
								align-items: center;
								// justify-content: space-between;

								// margin: 24rpx 0;
								.info_filled {
									background-color: #f53f3f;
									color: #ffffff;
									width: 30rpx;
									height: 30rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									border-radius: 50%;
									margin: 0 10rpx;
									font-size: 24rpx;
								}
							}

							.list-item {
								background-color: #ffffff;
								margin: 16rpx 24rpx;
								padding: 24rpx 0;
								padding-right: 12rpx;
								font-size: 26rpx;
								border-radius: 4rpx;
								position: relative;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								row-gap: 14rpx;

								.edit_order_check {
									display: flex;
									column-gap: 20rpx;
									align-items: center;
									justify-content: space-between;
								}

								&_info {
									display: flex;
									justify-content: space-between;
									align-items: center;
									background-color: #ffffff;
									margin: 16rpx 24rpx;
									padding: 24rpx;
									font-size: 28rpx;
									border-radius: 4rpx;

									&_left {
										flex-grow: 2;
										font-size: 26rpx;
										flex: 1;

										&_name_phone {
											display: flex;
											// margin-bottom: 12rpx;

											.name {
												margin-right: 20rpx;
												font-weight: bold;
											}
										}

										.call_status {
											display: flex;
											align-items: center;
											// justify-content: flex-end;
											// width: 100%;
											// margin-left: 20rpx;
											// margin-bottom: 22rpx;
											line-height: 28rpx;
											font-size: 28rpx;
											transform: scale(0.8);
										}

										.address {
											// font-weight: bold;
											// color: #999;
											width: 100%;
											text-overflow: ellipsis;
											overflow: hidden;
											white-space: pre-wrap;
										}
									}

									&_right {
										display: flex;
										justify-content: space-between;
										flex-direction: column;
										align-items: center;
										// width: 20%;

										font-size: 24rpx;

										.call_status {
											display: flex;
											align-items: center;
											justify-content: flex-end;
											width: 100%;
										}

										&_btn {
											display: flex;
											justify-content: space-between;
											width: 100%;
											margin-top: 12rpx;

											.bg_btn {
												background-color: #007cff20;
												border-radius: 50%;
												padding: 6rpx;
												margin-left: 22rpx;
											}
										}
									}
								}

								&_title {
									display: flex;
									align-items: center;
									font-size: 32rpx;
									// font-weight: bold;
									flex-wrap: wrap;
									margin-bottom: 12rpx;

									.module {
										color: #00c0c0;
										font-size: 24rpx;
										margin-left: 12rpx;
									}
								}

								.list-item_finish_order {
									display: flex;
									flex-direction: column;
									row-gap: 14rpx;
								}

								&_lable {
									display: flex;
									align-items: flex-start;
									// justify-content: space-between;
									color: #777;
									// margin-bottom: 12rpx;
									margin-left: 20rpx;
									flex-wrap: wrap;

									&_title {
										display: flex;
										align-items: center;
										// width: 196rpx;
										justify-content: flex-end;
									}

									.cont {
										color: #000;
										display: flex;
										align-items: center;
										flex-wrap: wrap;
										flex: 1;
										gap: 14rpx;
										word-wrap: break-word;
										word-break: break-all;

										.pdf_sty {
											background-color: rgb(250, 81, 81);
											width: 80rpx;
											height: 80rpx;
											color: #fff;
											text-align: center;
											font-size: 22rpx;
											position: relative;
											display: flex;
											align-items: center;
											justify-content: center;

											&:before {
												content: '';
												position: absolute;
												z-index: 2;
												border: 12rpx solid #0000002b;
												right: 0rpx;
												top: 0rpx;
												border-top: 12rpx solid #fff;
												border-right: 12rpx solid #fff;
											}
										}

										.level {
											margin-left: 12rpx;
											font-size: 24rpx;
										}

										.cont_img {
											width: 80rpx;
											height: 80rpx;
											// margin: 0 8rpx 16rpx;
											box-shadow: 0 0 2rpx 2rpx #e8e8e8;
										}
									}
								}

								&_top {
									display: flex;
									align-items: flex-start;
									justify-content: space-between;

									.more {
										color: #007cff;
										display: flex;
										align-items: center;
										font-size: 28rpx;
									}

									&_right {
										font-size: 22rpx;
										margin-left: 20rpx;
										display: flex;
										align-items: center;
										gap: 12rpx;
										flex-wrap: wrap;

										.tip {
											padding: 4rpx 12rpx;
											color: #fdf2f2;
											border-radius: 4rpx;
											background-color: rgba(245, 108, 108, 1);
											font-weight: bold;
										}

										._tag {
											border-radius: 4rpx;
											color: #ffffff;
											background-color: #007cff;
											padding: 4rpx 12rpx;
											font-weight: bold;
										}
									}
								}

								.log_item {
									position: relative;
									// border-left: 4rpx dashed #EAECEE;
									margin: 24rpx;

									// &:last-child {
									// 	border-left: 4rpx dashed transparent;
									// }

									.icon_item {
										position: absolute;
										left: -22rpx;
										top: -5rpx;
									}

									.block_item {
										padding: 0 0 0rpx 24rpx;

										.title_span {
											.title {
												display: flex;
												align-items: center;
												flex-wrap: wrap;
												font-size: 28rpx;
												color: #007cff;
											}

											.content_text {
												display: flex;
												align-items: center;
												flex-wrap: wrap;
												font-size: 24rpx;
												text-indent: 0.5em;
												margin-top: 12rpx;
											}

											.content_time {
												font-size: 24rpx;
												text-indent: 0.5em;
												margin: 0rpx 0 12rpx;
												color: #777;
											}
										}
									}
								}
							}

							.goods_info {
								margin: 24rpx;
								box-sizing: border-box;
								background-color: #fafafa;
								padding-bottom: 300rpx;
								display: flex;
								flex-direction: column;
								row-gap: 24rpx;
								border-radius: 8rpx;

								.goods_info_item_li {
									display: flex;
									justify-content: center;
									flex-direction: column;
									align-items: center;
									position: relative;
									padding: 24rpx 8rpx 24rpx 24rpx;
									background-color: #fff;
									// margin: 24rpx 0;

									.goods_info_conent {
										display: flex;
										flex-direction: column;
										// align-items: center;
										width: 100%;
										flex: 1;

										.top {
											display: flex;

											.left_img {
												width: 120rpx;
												height: 120rpx;
												box-shadow: 0 0 2rpx 2rpx #eee;
												border-radius: 4rpx;

												.img {
													width: 100%;
													height: 100%;
													border-radius: 4rpx;
												}
											}

											.right_text {
												font-size: 24rpx;
												// margin-right: 20rpx;
												flex: 1;
												position: relative;
												display: flex;
												flex-direction: column;
												row-gap: 6rpx;

												.brands {
													font-weight: bold;
													font-size: 28rpx;
													display: -webkit-box;
													-webkit-line-clamp: 2;
													-webkit-box-orient: vertical;
													overflow: hidden;
													word-wrap: break-word;
													word-break: break-all;
												}

												.code-qty {
													display: flex;
													column-gap: 72rpx;
												}

												.pt {
													display: flex;
													// align-items: center;

													justify-content: flex-start;

													.num_b {
														display: flex;
														align-items: center;
														column-gap: 6rpx;

														&_qty {
															background-color: #f53f3f;
															color: #fff;
															border-radius: 6rpx;
															padding: 0 6rpx;
															font-size: 22rpx;
														}
													}

													.tip {
														color: #777;
													}

													.lis {
														display: -webkit-box;
														-webkit-line-clamp: 2;
														-webkit-box-orient: vertical;
														overflow: hidden;
														word-wrap: break-word;
														word-break: break-all;
														flex: 1;
													}

													.lis_code {
														color: #007cff;
														text-overflow: ellipsis;
														white-space: nowrap;
														overflow: hidden;
														font-size: 24rpx;
														flex: 1;
														display: flex;
														align-items: center;
													}
												}

												.look_some {
													text-align: center;
												}
											}
										}

										.bottom {
											margin-top: 12rpx;
											display: flex;
											flex-direction: column;
											row-gap: 8rpx;

											.code {
												display: flex;
												justify-content: space-between;
												font-size: 24rpx;

												.info {
													display: flex;

													.label {
														color: #777;
													}
												}
											}

											.img-container {
												display: flex;
												column-gap: 40rpx;
												margin-top: 12rpx;

												.scene-img-container,
												.code-img-container {
													display: flex;

													.label {
														display: flex;

														.icon {
															color: #f56c6c;
														}

														.txt {
															color: #777;
															font-size: 24rpx;
														}
													}

													.code-img-upload,
													.scene-img-upload {
														width: 140rpx;
														height: 140rpx;
														display: flex;
														justify-content: center;
														align-items: center;
														border: 2rpx solid rgb(238, 238, 238);
													}

													.code-img-upload {
														margin-bottom: 24rpx;
													}

													.scene-img,
													.code-img {
														position: relative;

														.img {
															width: 140rpx;
															height: 140rpx;
														}

														.del-btn {
															position: absolute;
															top: 0;
															right: 0;
															width: 40rpx;
															height: 40rpx;
															background-color: rgba(0, 0, 0, 0.7);
															display: flex;
															justify-content: center;
															align-items: center;

															.icon {
																width: 24rpx;
																height: 24rpx;
																display: flex;
																justify-content: center;
																align-items: center;
															}
														}
													}
												}
											}
										}
									}
								}
							}

							.work_no {
								display: flex;
								margin: 24rpx;
								background-color: #fff;
								padding: 24rpx;
								font-size: 28rpx;
								filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06));
								border-radius: 4rpx;

								.label_name {
									color: #777;
								}

								.text_no {
									font-weight: bold;
								}
							}

							.log_list_box {
								padding: 0 24rpx 24rpx;

								.log_list {
									padding: 24rpx 24rpx;
									background-color: #fff;
									filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06));
									border-radius: 4rpx;

									.log_item {
										position: relative;
										border-left: 4rpx dashed #eaecee;

										&:last-child {
											border-left: 4rpx dashed transparent;
										}

										.icon_item {
											position: absolute;
											left: -20rpx;
											top: -5rpx;
											z-index: 9;
										}

										.block_item {
											padding: 0 0 30rpx 24rpx;

											.title_span {
												.title {
													display: flex;
													align-items: center;
													flex-wrap: wrap;
													font-size: 28rpx;
													color: #007cff;
												}

												.content_text {
													display: flex;
													align-items: center;
													flex-wrap: wrap;
													font-size: 24rpx;
													text-indent: 0.5em;
													margin-top: 12rpx;
												}

												.content_time {
													font-size: 24rpx;
													text-indent: 0.5em;
													margin: 0rpx 0 12rpx;
												}
											}
										}
									}
								}
							}
						}

						.footer_order {
							display: flex;
							align-items: center;
							background-color: #ffffff;
							// z-index: 99;
							// height: 140rpx;
							// position: fixed;
							// bottom: 0;
							width: 100%;
							padding: 30rpx 48rpx;
							box-sizing: border-box;
							border-top: 1px solid #eee;
							gap: 24rpx;

							&_left {
								flex: 1;
								height: 80rpx;
								background-color: rgba(245, 108, 108, 1);
								display: flex;
								align-items: center;
								justify-content: center;
								color: #fff;
								font-size: 28rpx;
								font-weight: bold;
								border-radius: 40rpx;
								width: 50%;
							}

							&_left_ {
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 24rpx;
								margin-left: 32rpx;
								width: 14%;
								height: 80rpx;
								color: #007cff;
								font-size: 28rpx;
								font-weight: bold;
							}

							&_right {
								flex: 1;
								height: 80rpx;
								background-color: #007cff;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #fff;
								font-size: 28rpx;
								font-weight: bold;
								border-radius: 40rpx;
							}

							&_right_ {
								flex: 1;
								// align-items: center;
								// justify-content: center;
								// color: #fff;
								// font-size: 28rpx;
							}

							&:has(.footer_order_right_) {
								// display: none;
								padding: 0;
							}
						}
					}
				}
			}
		}

		.share_box {
			background-color: #ffffff;
			margin: 0 24rpx;
			// padding: 0 24rpx;
			// padding-right: 12rpx;
			font-size: 28rpx;
			border-radius: 8rpx;

			.share_content {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				// justify-content: space-around;
				justify-content: space-between;
				// column-gap: 12rpx;
				// row-gap: 24rpx;

				&_item {
					width: 20%;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					padding: 20rpx 12rpx;
					box-sizing: border-box;
					// background-color: #007cff;
					border-radius: 10rpx;

					.icon_img {
						width: 60rpx;
						height: 60rpx;
						padding: 12rpx 0;
					}

					.icon_name {
						font-size: 24rpx;
						// color: rgba(134, 144, 156, 1);
						// color: #007cff;
						// color: #000;
					}
				}

				.share_content_item_active {
					// opacity: 0.8;

					.icon_name {
						// color: #fff;
					}
				}
			}

			.cancel_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ffffff;
				border: 1rpx solid rgba(229, 230, 235, 1);
				margin: 40rpx 24rpx 0;
				height: 80rpx;
				border-radius: 40rpx;
			}
		}

		.more_box {
			background-color: #ffffff;
			padding: 24rpx 24rpx 40rpx;
			// padding-right: 12rpx;
			font-size: 28rpx;
			border-radius: 8rpx;

			.share_content {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-evenly;

				&_item {
					width: 20%;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					padding: 12rpx;
					box-sizing: border-box;

					.icon_img {
						width: 80rpx;
						height: 80rpx;
						padding: 12rpx 0;
					}

					.icon_name {
						font-size: 24rpx;
						color: #777;
					}
				}
			}

			.cancel_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #ffffff;
				border: 1rpx solid rgba(229, 230, 235, 1);
				margin: 40rpx 24rpx 0;
				height: 80rpx;
				border-radius: 40rpx;
			}
		}

		.popup-time_show {
			background-color: #fff;
			height: 600rpx;
			border-radius: 20rpx 20rpx 0 0;
			width: 100%;

			.lable_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 100rpx;
				background-color: #fff;
				border-radius: 40rpx 40rpx 0 0;
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
				margin: 0 32rpx;
				font-weight: bold;
				font-size: 32rpx;

				.lable_btn {
					color: #007cff;
					font-size: 28rpx;
				}
			}

			.bodyer_time {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 32rpx 24rpx;

				&_left {
					font-size: 28rpx;

					&_tip {
						color: #999;
					}
				}

				&_right {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #999;
				}
			}
		}

		.call_phone_popup {
			background-color: #fff;
			height: 680rpx;
			border-radius: 20rpx 20rpx 0 0;
			width: 100%;

			.lable_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 100rpx;
				background-color: #fff;
				border-radius: 40rpx 40rpx 0 0;
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
				margin: 0 32rpx;
				font-weight: bold;
				font-size: 32rpx;

				.lable_btn {
					color: #007cff;
					font-size: 28rpx;
				}
			}

			.call_content {
				padding: 0 32rpx 32rpx;

				.bodyer_time {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 32rpx 0;

					&_left {
						font-size: 28rpx;

						&_tip {
							color: #999;
						}
					}

					&_right {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #999;
					}
				}

				.table {
					font-size: 28rpx;
					font-weight: bold;
					margin: 24rpx 0 12rpx;
				}

				.text_input {
					// margin: 24rpx 0 0 32rpx;
					position: relative;

					:deep(.uni-easyinput__content-textarea) {
						margin: 0;
						background-color: rgb(243, 244, 248);
					}

					padding: 12rpx 12rpx 24rpx;
					background-color: rgb(243, 244, 248);

					.coun {
						font-size: 22rpx;
						position: absolute;
						right: 12rpx;
						bottom: 6rpx;
						color: #999;
					}
				}

				.call_btn {
					margin: 24rpx 24rpx 40rpx;
					height: 80rpx;
					background-color: #007cff;
					border-radius: 40rpx;
					color: #fff;
					font-size: 30rpx;
					text-align: center;
					line-height: 80rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
				}
			}
		}

		.add_main {
			background-color: #fff;
			border-radius: 10rpx;
			width: 90vw;
			height: 900rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 34rpx;
			box-sizing: border-box;
			row-gap: 24rpx;

			.text_top_popup {
				text-align: center;
				font-size: 28rpx;
				padding: 0rpx 0 20rpx;
				width: 100%;
				position: relative;

				.icon {
					position: absolute;
					right: 0rpx;
					font-weight: 500;
				}
			}

			.height_list {
				display: flex;
				width: 100%;

				.left_img {
					width: 180rpx;
					height: 180rpx;
					border: 1px solid #eee;
					border-radius: 4rpx;
					margin: 0 20rpx 0 0;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 4rpx;
					}
				}

				.right_text {
					font-size: 24rpx;
					// margin-right: 12rpx;
					flex: 1;
					position: relative;

					.brands {
						word-wrap: break-word;
						word-break: break-all;
						font-weight: bold;
						font-size: 28rpx;
						margin: 0 0 10rpx;
					}

					.ms {
						display: flex;
						// align-items: center;
						width: 100%;
						word-wrap: break-word;
						word-break: break-all;
						margin: 8rpx 0;

						.tip {
							color: #777;
						}

						.lis {
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							word-wrap: break-word;
							word-break: break-all;
							flex: 1;
						}
					}
				}
			}

			.search_box {
				display: flex;
				align-items: center;
				column-gap: 24rpx;
				width: 100%;

				.search_input {
					flex: 1;
				}

				.search_btn {
					color: #007cff;
					font-size: 28rpx;
				}
			}

			.onlogout {
				font-size: 28rpx;
				margin: 30rpx 20rpx 40rpx;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				width: 100%;
				color: #fff;
				background-color: #007cff;
			}

			:deep(.is-input-border) {
				// border-radius: 50rpx !important;
				background-color: rgba(243, 244, 248, 1) !important;
				padding: 10rpx;
				border: none;
				height: 80rpx !important;
				line-height: 80rpx;
				font-size: 28rpx;
				flex: 1;
			}
		}
	}
</style>
